我正在尝试创建一个指令，其中数据显示在表格布局中。每行都有一个编辑按钮，单击编辑按钮后，只有该行应处于编辑模式。但在我的例子中，所有行都以编辑模式显示。 这是 demo .
指令代码如下:
.directive('myGrid', function() {
return {
restrict: 'E',
scope: {
employees: '='
},
controller: function($scope) {
$scope.isEdit = false;
$scope.showEdit = function() {
$scope.isEdit = $scope.isEdit == true ? false : true;
}
},
template: '<table class="table">' +
'<thead>' +
'<tr>' +
'<th ng-repeat="(key,value) in employees[0]">{{key}}</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="emp in employees">' +
'<td><span ng-hide="isEdit">{{emp.FirstName}}</span><input type="text" ng-show="isEdit" ng-model="emp.FirstName" class="form-control"></td>' +
'<td><span ng-hide="isEdit">{{emp.LastName}}</span><input type="text" ng-show="isEdit" ng-model="emp.LastName" class="form-control"></td>' +
'<td><span ng-hide="isEdit">{{emp.Email}}</span><input type="text" ng-show="isEdit" ng-model="emp.Email" class="form-control"></td>' +
'<td><span ng-click="showEdit()" ng-class="{\'glyphicon glyphicon-edit\':isEdit==false,\'glyphicon glyphicon-ok\':isEdit==true}"></span></td>' +
'</tr>' +
'</tbody>' +
'</table>'
};
})
最佳答案
angular
.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.employees = [{
'FirstName': 'Jay',
'LastName': 'Raj',
'Email': 'jay3dec@gmail.com'
}, {
'FirstName': 'Roy',
'LastName': 'Mathews',
'Email': 'roymathews@gmail.com'
}];
$scope.employees.forEach(function(employee) {
employee.isEdit = false;
});
}])
.directive('myGrid', function() {
return {
restrict: 'E',
scope: {
employees: '='
},
controller: function($scope) {
$scope.showEdit = function(emp) {
emp.isEdit = !emp.isEdit;
};
},
template: '<table class="table">' +
'<thead>' +
'<tr>' +
'<th ng-repeat="(key,value) in employees[0]">{{key}}</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="emp in employees">' +
'<td><span ng-if="!emp.isEdit">{{emp.FirstName}}</span><input type="text" ng-if="emp.isEdit" ng-model="emp.FirstName" class="form-control"></td>' +
'<td><span ng-if="!emp.isEdit">{{emp.LastName}}</span><input type="text" ng-if="emp.isEdit" ng-model="emp.LastName" class="form-control"></td>' +
'<td><span ng-if="!emp.isEdit">{{emp.Email}}</span><input type="text" ng-if="emp.isEdit" ng-model="emp.Email" class="form-control"></td>' +
'<td><span ng-click="showEdit(emp)" ng-class="{\'glyphicon glyphicon-edit\':emp.isEdit==false,\'glyphicon glyphicon-ok\':emp.isEdit==true}"></span></td>' +
'</tr>' +
'</tbody>' +
'</table>'
};
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl">
<my-grid employees="employees"></my-grid>
</div>
</body>关于javascript - 指令模板中 ng repeat 内项目的隔离范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37513025/