个人中心
gpt4 book ai didi

javascript - 指令模板中 ng repeat 内项目的隔离范围

转载 作者：行者123 更新时间：2023-11-30 16:02:26 25 4
gpt4 key购买 nike

我正在尝试创建一个指令，其中数据显示在表格布局中。每行都有一个编辑按钮，单击编辑按钮后，只有该行应处于编辑模式。但在我的例子中，所有行都以编辑模式显示。这是 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/

25 4 0
文章推荐： C# 将函数附加到属性 setter 的最短方式(最少的文本)是什么？
文章推荐： c - gmp 值转换为 char*
文章推荐： c# - 返回任务的方法的不同实现
文章推荐： c - 使用 fprintf 时出现问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com