I have a simple code segment that was meant to work along with AngularJS, but it simply does not.
<form ...> ...
<div class="fieldcontain option-handler" style="display: none;" ng-controller="DynamicTable as table">
<label for="opcoes">
Opcoes
</label>
<ul class="one-to-many">
<pre>{{table.rows}}</pre>
<table>
<thead>
<th>Enunciado</th>
<th>Score</th>
<th> </th>
</thead>
<tbody>
<tr ng-repeat="row in table.rows">
<td><input type="text" name="questoes[${i}].opcoes[{{row}}].enunciado" /></td>
<td><input type="number" name="questoes[${i}].opcoes[{{row}}].score" /></td>
<td><input type="button" value="Delete" ng-click="table.delRow()" /></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" ng-click="table.addRow()" />
</ul>
</div>
...
</form>
The {{table.rows}} excerpt works fine, just as well as the ng-repeat="row in table.rows" directive. Both ng-click directives don't work, though. Even when I tried changing it to ng-click="alert('Hello, World!');" it did not work. Here's the script code that should be ran:
var app = angular.module("DynamicForm", []);
app.controller("DynamicTable", function(){
this.rows = [0];
this.addRow = function() {
this.rows.push(this.rows.length);
alert("Added row" + (this.rows.length - 1).toString());
};
this.delRow = function() {
this.rows.splice(-1, 1);
};
});
It generates a row for the table, with the right value for {{row}} and {{table.rows}} displays correctly within <pre>.
This is ran within a Grails 2.4.4 .gsp file, with AngularJS 1.3.15.
