Ik heb een simpele lus met ng-repeat
zoals dit:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Er is een functie in de controller $scope.removeTask(taskID)
.
Voor zover ik weet zal Angular eerst de view renderen en de geïnterpoleerde {{task.id}}
vervangen door een getal, en vervolgens op click event de ng-click
string evalueren.
In dit geval krijgt ng-click
helemaal wat er verwacht wordt, namelijk: ng-click="removeTask(5)".
Echter... het'doet helemaal niets.
Natuurlijk kan ik een code schrijven om task.id
uit de $tasks
array of zelfs de DOM te halen, maar dit lijkt niet de Angular manier.
Dus, hoe kan men dynamische inhoud toevoegen aan ng-click
directive binnen een ng-repeat
loop?
In plaats van
<button ng-click="removeTask({{task.id}})">remove</button>
doe dan dit:
<button ng-click="removeTask(task.id)">remove</button>
Zie deze fiddle:
Een ding dat me echt dwars zat, was toen ik deze html inspecteerde in de browser, in plaats van het te zien uitgebreid tot iets als:
<button ng-click="removeTask(1234)">remove</button>
zag ik:
<button ng-click="removeTask(task.id)">remove</button>
De laatste werkt echter wel!
Dit komt omdat je in de "Angular World" bent, wanneer binnen ng-click="" Angular al klaar weet over task.id aangezien je binnen het's model bent. Er is geen noodzaak om Data binding te gebruiken, zoals in {{}}.
Verder, als je de taak object zelf wilde doorgeven, kunt u als:
<button ng-click="removeTask(task)">remove</button>
dit werkt. bedankt. Ik injecteer aangepaste html en compileer het met angular in de controller.
var tableContent= '<div>Search: <input ng-model="searchText"></div>'
+'<div class="table-heading">'
+ '<div class="table-col">Customer ID</div>'
+ ' <div class="table-col" ng-click="vm.openDialog(c.CustomerId)">{{c.CustomerId}}</div>';
$timeout(function () {
var linkingFunction = $compile(tableContent);
var elem = linkingFunction($scope);
// You can then use the DOM element like normal.
jQuery(tablePanel).append(elem);
console.log("timeout");
},100);