Question

我试图创建一个指令，其中数据以表格布局显示。每行都有一个编辑按钮，单击编辑按钮时，该行应处于编辑模式。但在我的情况下，所有行都以编辑模式显示。这是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>'
  };
})

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

尽管如此，我还是根据ng-repeat的$ index创建了一个替代方案。还可以跟踪正在修改的项目而不是$ index。

Demo

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

.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>

Answer 3

试试这个

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: