Angular dieser Bereich außerhalb

Question

aufgerufen werden, wenn dieser Plunker Blick in Example

angular.module('testapp', []) 
    .controller('testcontroller',function ($scope) { 
     $scope.persons = [{ FirstName: 'John', LastName: 'Doe' }, { FirstName: 'Peter', LastName: 'mal' }]; 

     $scope.onEdit = function() 
     { 
      this.isInEditMode = true; 
     } 

     $scope.onCancel = function() { 
      this.isInEditMode = false; 
     } 

     $scope.addnew = function() 
     { 
      this.isInEditMode = false; 
     } 
    }) 

<table> 
     <tr> 
      <th>Fname</th> 
      <th>Lname</th> 
     </tr> 

     <tr ng-repeat="person in persons"> 
      <td><input type="text" ng-model="person.FirstName" ng-disabled="!isInEditMode" /></td> 
      <td><input type="text" ng-model="person.LastName" ng-disabled="!isInEditMode" /></td> 
      <td><input type="button" class="btn-primary" value="Edit" ng-click="onEdit()" /></td> 
      <td><input type="button" class="btn-primary" value="Cancel" ng-click="onCancel()" /></td> 
     </tr> 

    </table> 
    <input type="button" value="add" ng-click="addnew()"/> 
</div> 

Ich bin Umgang mit
this.isInEditMode = true in Klick Schaltfläche Bearbeiten und falsch in Taste abbrechen click.Ich versuche, IsInEditMode = false bei einem Klick auf addnew.Ich bin nicht in der Lage, das zu tun, kann einige Körper helfen, wie dies zu handhaben.Wenn ich $ scope.isInEditMode erstellen wird es aktivieren/deaktivieren Sie alle Zeilen, die ich nicht tun wollen.

Answer 1

Sie können jeder Person isInEditMode Eigenschaft hinzufügen und sie einfach setzen alle sie zu falsch.

$scope.onCancel = function() { 
    $scope.persons.forEach(function (person) { 
    person.isInEditMode = false; 
    }); 
} 

$scope.addnew = function() { 
    this.isInEditMode = false; 

    $scope.onCancel(); 
} 

ich gegabelt Ihre Plunker mit Lösung: https://plnkr.co/edit/pyBEuj79wIV2pcYRq2Lh?p=preview

Answer 2

Wenn Sie Ihre Variable in diese setzen, sollten Sie es in der Ansicht wie folgt aufrufen:

angular.module('testapp', []) 
    .controller(function testcontroller ($scope) { 
      var vm = this; 
     $scope.persons = [{ FirstName: 'John', LastName: 'Doe' }, { FirstName: 'Peter', LastName: 'mal' }]; 

     $scope.onEdit = function() 
     { 
      vm.isInEditMode = true; 
     } 

     $scope.onCancel = function() { 
      vm.isInEditMode = false; 
     } 

     $scope.addnew = function() 
     { 
      vm.isInEditMode = false; 
     } 
    }) 

<table> 
     <tr> 
      <th>Fname</th> 
      <th>Lname</th> 
     </tr> 

     <tr ng-repeat="person in persons"> 
      <td><input type="text" ng-model="person.FirstName" ng-disabled="!testcontroller.isInEditMode" /></td> 
      <td><input type="text" ng-model="person.LastName" ng-disabled="!testcontroller.isInEditMode" /></td> 
      <td><input type="button" class="btn-primary" value="Edit" ng-click="onEdit()" /></td> 
      <td><input type="button" class="btn-primary" value="Cancel" ng-click="onCancel()" /></td> 
     </tr> 

    </table> 
    <input type="button" value="add" ng-click="addnew()"/> 
</div>