Imam preprosto zanko z ng-repeat
, kot je ta:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
V krmilniku je funkcija $scope.removeTask(taskID)
.
Kolikor vem, bo Angular najprej izrisal pogled in interpolirano {{naziva.id}}
nadomestil s številko, nato pa bo ob dogodku kliknil ovrednotil niz ng-click
.
V tem primeru ng-click
dobi popolnoma to, kar se pričakuje, tj.: ng-click="removeTask(5)".
Vendar... to ne naredi ničesar.
Seveda lahko napišem kodo, s katero dobim task.id
iz polja $tasks
ali celo iz DOM-a, vendar se to ne zdi pravi način za Angular.
Kako torej dodati dinamično vsebino direktivi ng-click
znotraj zanke ng-repeat
?
Namesto
<button ng-click="removeTask({{task.id}})">remove</button>
naredite to:
<button ng-click="removeTask(task.id)">remove</button>
Prosimo, poglejte to violino:
Ko sem v brskalniku pregledal ta html, se mi je, namesto da bi ga razširil na nekaj podobnega:
<button ng-click="removeTask(1234)">remove</button>
Videl sem:
<button ng-click="removeTask(task.id)">remove</button>
Vendar pa slednji deluje!
To je zato, ker ste v "Angularjevem svetu", ko znotraj ng-click="" Angular že ve za task.id, saj ste znotraj njegovega modela. Ni potrebe po uporabi vezave podatkov, kot v primeru {{}}.
Nadalje, če bi želeli posredovati sam objekt naloge, lahko tako:
<button ng-click="removeTask(task)">remove</button>
to deluje. hvala. V krmilnik injiciram html po meri in ga sestavim z uporabo angularja.
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);