Isolierte Bereich für Elemente innerhalb ng wiederholen in Richtlinie Vorlage

Ich versuche, eine Anweisung zu erstellen, wo Daten in einem Tabellenlayout angezeigt wird. Jede Zeile hat eine Bearbeitungsschaltfläche und beim Klicken auf die Bearbeitungsschaltfläche sollte nur diese Zeile im Bearbeitungsmodus sein. Aber in meinem Fall werden alle Zeilen im Bearbeitungsmodus angezeigt. Hier ist demo. HierIsolierte Bereich für Elemente innerhalb ng wiederholen in Richtlinie Vorlage

ist die Richtlinie Code:

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

Quelle

2016-05-29 iJade

Ich empfehle auch 'ng-show' zu ändern und' ng-hide' für 'ng-if' die mehr performant ist .. Siehe die Richtlinie Vorlage in meiner Antwort –

hier' ng -show' und 'ng-hide' sind besser als' ng-if', da das erneute Erstellen von DOM teuer ist und auch 'ng-if'' scope' hat, aber ng-show und ng-hide keinen Scope haben. –

Wenn Sie 'ng-if' verwenden, wird der Inhalt nur dann geladen, wenn der Ausdruck 'ng-if' truthy ist. –

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>

Quelle

2016-05-29 18:05:16

Ich denke, diese Lösung ist nicht gut, weil Original-Objekt ändern. –

versuchen, wie diese

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>

Quelle

2016-05-29 18:18:52

Ihre Lösung ist falsch, denn wenn Sie die Taste drücken, um eine Zeile zu bearbeiten, ändern Sie sie wie erwartet, aber sie ändert sich nie wieder in editiert, wenn Sie die Taste erneut drücken. Um richtig zu arbeiten, können Sie das tun: '$ scope.isEdit = $ scope.isEdit === index? -1: index; 'in Ihrer' showEdit' Methode –

@Yosvel Quintero, Danke für Ihren guten Punkt. –

Yosvel Lösung ist in Ordnung und ist zugegebenermaßen die einfachste.

Trotzdem habe ich eine Alternative basierend auf dem $ Index der ng-Wiederholung erstellt. Man könnte auch verfolgen, welches Element anstelle des $ Index modifiziert wird.

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>

Quelle

2016-05-29 18:19:34 VRPF

Gute und saubere Lösung +1 –

Isolierte Bereich für Elemente innerhalb ng wiederholen in Richtlinie Vorlage

Antwort

Verwandte Themen