指令模板中的重复ng内项目的隔离范围

我试图创建一个指令，其中数据显示在表格布局中。每行都有一个编辑按钮，点击编辑按钮时，只有该行应该处于编辑模式。但在我的情况下，所有的行都以编辑模式显示。这里是demo。指令模板中的重复ng内项目的隔离范围

这里是指令代码：

.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>' 
    }; 
})

来源

2016-05-29 iJade

我还建议改变'NG-show'和'NG-hide'为'NG-if'这是更好的性能。请参见该指令模板在我的回应 –

这里'纳克-show'和'ng-hide'优于'ng-if'，因为重新创建DOM代价高昂，而且ng-if具有scope，但是ng-show和ng-hide没有范围。 –

如果使用'ng-if'，只有当ng-if表达式评估为真时，才会加载内容。 –

angular 
 
    .module('myApp', []) 
 
    .controller('myCtrl', ['$scope', function($scope) { 
 
     $scope.employees = [{ 
 
      'FirstName': 'Jay', 
 
      'LastName': 'Raj', 
 
      'Email': '[email protected]' 
 
     }, { 
 
      'FirstName': 'Roy', 
 
      'LastName': 'Mathews', 
 
      'Email': '[email protected]' 
 
     }]; 
 
     $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>

来源

2016-05-29 18:05:16

我觉得这个解决方案不好，因为改变了原来的对象。 –

尝试这样

angular.module('myApp', []) 
 

 
.controller('myCtrl', ['$scope', function($scope) { 
 
    $scope.employees = [{ 
 
    'FirstName': 'Jay', 
 
    'LastName': 'Raj', 
 
    'Email': '[email protected]' 
 
    }, { 
 
    'FirstName': 'Roy', 
 
    'LastName': 'Mathews', 
 
    'Email': '[email protected]' 
 
    }]; 
 
}]) 
 

 
.directive('myGrid', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     employees: '=' 
 
    }, 
 
    controller: function($scope) { 
 
     $scope.isEdit = -1; 
 

 
     $scope.showEdit = function(index) { 
 
     
 
     $scope.isEdit = $scope.isEdit == index ? -1 : index; 
 
     } 
 
    }, 
 
    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-show="isEdit != $index">{{emp.FirstName}}</span><input type="text" ng-show="isEdit == $index" ng-model="emp.FirstName" class="form-control"></td>' + 
 
     '<td><span ng-show="isEdit != $index">{{emp.LastName}}</span><input type="text" ng-show="isEdit == $index" ng-model="emp.LastName" class="form-control"></td>' + 
 
     '<td><span ng-show="isEdit != $index">{{emp.Email}}</span><input type="text" ng-show="isEdit == $index" ng-model="emp.Email" class="form-control"></td>' + 
 
     '<td><span ng-click="showEdit($index)" ng-class="{\'glyphicon glyphicon-edit\':isEdit != $index,\'glyphicon glyphicon-ok\':isEdit == $index}"></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> 
 
<div ng-app="myApp"> 
 
    <div class="container" ng-controller="myCtrl"> 
 
    <my-grid employees="employees"></my-grid> 
 
    </div> 
 
</div>

来源

2016-05-29 18:18:52

您的解决方案是错误的，因为当您按下按钮编辑一行时，它会更改为按预期进行编辑，但再次按下该按钮时不会再变回编辑状态。要正常工作，你可以这样做：'$ scope.isEdit = $ scope.isEdit === index？ -1：index;'在你的'showEdit'方法中 –

@Yosvel Quintero，谢谢你的好处。 –

Yosvel解决方案很好，无疑是最简单的。

不过，我根据ng-repeat的$索引创建了一个替代方案。人们也可以跟踪哪些项目正在被修改而不是$索引。

Demo

angular.module('myApp', []) 

.controller('myCtrl', ['$scope', function($scope) { 
    $scope.employees = [{ 
    'FirstName': 'Jay', 
    'LastName': 'Raj', 
    'Email': '[email protected]' 
    }, { 
    'FirstName': 'Roy', 
    'LastName': 'Mathews', 
    'Email': '[email protected]' 
    }]; 
}]) 

.directive('myGrid', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     employees: '=' 
    }, 
    controller: function($scope) { 

     $scope.indexBeingEdited = -1; 

     $scope.showEdit = function($index) { 
     if($scope.indexBeingEdited === $index) { 
      // second click... stop edit 
      $scope.indexBeingEdited = -1; 
      return; 
     } 
     $scope.indexBeingEdited = $index; 
     }; 
     $scope.isEdit = function($index) { 
     return $index === $scope.indexBeingEdited; 
     }; 
    }, 
    templateUrl: '/myGrid.html' 
    }; 
}) 

<body ng-app="myApp"> 
    <div class="container" ng-controller="myCtrl"> 
    <my-grid employees="employees"></my-grid> 
    </div> 
</body> 


<script type="text/ng-template" id="/myGrid.html"> 
    <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($index)">{{emp.FirstName}}</span> 
      <input type="text" ng-show="isEdit($index)" ng-model="emp.FirstName" class="form-control"> 
     </td> 
     <td> 
      <span ng-hide="isEdit($index)">{{emp.LastName}}</span> 
      <input type="text" ng-show="isEdit($index)" ng-model="emp.LastName" class="form-control"> 
     </td> 
     <td> 
      <span ng-hide="isEdit($index)">{{emp.Email}}</span> 
      <input type="text" ng-show="isEdit($index)" ng-model="emp.Email" class="form-control"> 
     </td> 
     <td> 
      <span ng-click="showEdit($index)" class="glyphicon" ng-class="{' glyphicon-edit':isEdit($index)===false,'glyphicon-ok':isEdit($index)===true}"></span> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</script>

来源

2016-05-29 18:19:34 VRPF

好的和干净的解决方案+1 –

指令模板中的重复ng内项目的隔离范围

回答

相关问题