Jeg har en enkel løkke med ng-repeat
som dette:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Det er en funksjon i kontrolleren $scope.removeTask(taskID)
.
Så vidt jeg vet vil Angular først gjengi visningen og erstatte interpolert {{task.id}}
med et tall, og deretter, ved klikkhendelse, evaluere ng-click
-strengen.
I dette tilfellet får ng-click
helt det som er forventet, dvs: ng-click="removeTask(5)".
Men... det' er ikke å gjøre noe.
Selvfølgelig kan jeg skrive en kode for å få task.id
fra $tasks
array eller til og med DOM, men dette virker ikke som Angular måte.
Så, hvordan kan man legge til dynamisk innhold til ng-klikk
direktiv inne i en ng-repeat
loop?
I stedet for
<button ng-click="removeTask({{task.id}})">remove</button>
gjør dette:
<button ng-click="removeTask(task.id)">remove</button>
Vennligst se denne fela:
En ting som virkelig hengte meg opp, var da jeg inspiserte denne html-en i nettleseren, i stedet for å se den utvidet til noe sånt som:
<button ng-click="removeTask(1234)">remove</button>
så jeg
<button ng-click="removeTask(task.id)">remove</button>
Sistnevnte fungerer imidlertid!
Dette er fordi du er i "Angular World", når du er inne i ng-click="" Angular all ready vet om task.id som du er inne i den "s modell. Det er ikke nødvendig å bruke databinding, som i {{}}.
Videre, hvis du ønsket å passere selve oppgaveobjektet, kan du like:
<button ng-click="removeTask(task)">remove</button>
dette fungerer. takk. Jeg injiserer tilpasset html og kompilerer den ved hjelp av vinkel i kontrolleren.
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);