Angularjs 将$index作为参数从指令模板传递到指令';s控制器和使用模块控制器';指令控制器中的s函数';s函数
这里我使用personManager作为控制器,myPersonDirective作为指令Angularjs 将$index作为参数从指令模板传递到指令';s控制器和使用模块控制器';指令控制器中的s函数';s函数,angularjs,angularjs-directive,angularjs-controller,Angularjs,Angularjs Directive,Angularjs Controller,这里我使用personManager作为控制器,myPersonDirective作为指令 如何将$index从模板传递到deletePerson()函数 如何使用deletePerson(index)中的personManageInst.person对其执行splice()函数 myDirective.js personsTemplate.html {{pers.name} {{pers.age} {{pers.city} 删除 myApp.html 添加标题、css、脚本 . .
- 如何将$index从模板传递到deletePerson()函数
- 如何使用deletePerson(index)中的personManageInst.person对其执行splice()函数
{{pers.name}
{{pers.age}
{{pers.city}
删除
myApp.html
添加标题、css、脚本
.
.
.
.
.
deletePerson函数应位于控制器中。ng repeat需要是-'trackby$index',然后您可以调用该函数 您的deletePerson函数应该在控制器中。ng repeat需要是-'trackby$index',然后您可以调用该函数 deletePerson函数必须位于控制器中deletePerson函数必须位于控制器中
var myDirModule = angular.module('myDirApp', []);
var personManager = function()
{
var personManageInst = this;
personManageInst.personsData = [
{name: "Sam", age:33, city:"Delhi"},
{name: "Mac", age:22, city:"Mumbai"},
];
personManageInst.addNewMember = function()
{
personManageInst.personsData.push({name: personManageInst.name, age: personManageInst.age, city: personManageInst.city});
};
};
var myPersonDirective = function()
{
return{
restrict: "AE",
templateUrl: "personsTemplate.html",
scope: {
pers: "=",
index: "@"
},
controller: function($scope){
$scope.deletePerson = function(index)
{
console.log(index); output: index no.
personManageInst.personsData.splice(index, 1); //output: personManageInst is undefined
};
}
}
};
myDirModule.controller("myPerCont", personManager).directive("personDir", myPersonDirective);
<tr>
<td>{{pers.name}}</td>
<td>{{pers.age}}</td>
<td>{{pers.city}}</td>
<td>
<button type="button" ng-click="deletePerson(index)">Delete</button>
</td>
</tr>
<!DOCTYPE html>
<html>
<head>add title, css, scripts</head>
</html>
<body>
.
.
.
<tr person_dir pers="perso" index="{{$index}}" ng-repeat="perso in personManageInst.personsData"></tr>
.
.
</body>