Tengo un simple bucle con ng-repeat
como este:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Hay una función en el controlador $scope.removeTask(taskID)
.
Por lo que sé, Angular primero renderizará la vista y reemplazará el {{task.id}} interpolado con un número, y luego, en el evento de clic, evaluará la cadena
ng-click`.
En este caso ng-click
obtiene totalmente lo esperado, es decir: ng-click="removeTask(5)".
Sin embargo... no hace nada.
Por supuesto que puedo escribir un código para obtener task.id
del array $tasks
o incluso del DOM, pero esto no parece ser la manera de Angular.
Entonces, ¿cómo se puede añadir contenido dinámico a la directiva ng-click
dentro de un bucle ng-repeat
?
En lugar de
<button ng-click="removeTask({{task.id}})">remove</button>
haz esto:
<button ng-click="removeTask(task.id)">remove</button>
Por favor, vea este fiddle:
Una cosa que realmente me colgó, fue cuando inspeccioné este html en el navegador, en lugar de verlo expandido a algo como:
<button ng-click="removeTask(1234)">remove</button>
Vi:
<button ng-click="removeTask(task.id)">remove</button>
Sin embargo, ¡este último funciona!
Esto se debe a que usted está en el "Mundo Angular", cuando dentro de ng-click=" " Angular todo listo sabe acerca de task.id como usted está dentro de ella' s modelo. No hay necesidad de utilizar el enlace de datos, como en {{}}.
Además, si quieres pasar el propio objeto de la tarea, puedes hacerlo:
<button ng-click="removeTask(task)">remove</button>
esto funciona, gracias. Estoy inyectando html personalizado y lo compilo usando angular en el controlador.
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);