ngif mit einer Form innerhalb einer NG-Wiederholung

Question

Ich benutze eine ngRepeat Direktive, um Daten von Personen zu zeigen (jetzt zeige ich nur den Namen der Personen).

Der Name der Person wird mit einem Span Tag angezeigt. Auch gibt es eine Schaltfläche, die die span verbergen und ein Eingabefeld mit dem Namen der Person, so dass es bearbeitbar sein kann.

Wenn ich eine Taste drücken muss ich die betroffenen Spanne „umgewandelt“ zu Eingang, sein, aber es funktioniert nicht und die ganze umspannt umgewandelt werden Eingänge.

Ich benutze eine Tabelle und ein Formular, aber ich zeige sie hier nicht, so dass es leicht erklärt werden kann.

Answer 1

Sie müssen ein Array von Boolean behalten, um ein Eingabefeld oder einen Bereich für jedes Element in Ihrem ng-repeat anzuzeigen.

$scope.showEdit = new Array(n) 

$scope.showInput(index) { 
    $scope.showEdit[index] = !$scope.showEdit[index]; 
} 

und schließlich

<span ng-if="!showEdit[$index]">{{a_person.name}}</span> 
<input ng-if= "!showEdit[$index]" type="text" value="{{a_person.name}}"> 

Hoffe, Sie bekommen die Idee.

Answer 2

<div ng-repeat="a_person in persons.data track by $index"> 

    <md-button aria-label="Show inputs"> 
     <!-- REPLACE 
     <md-icon ng-click="showInput(a_person)">edit</md-icon> 
     --> 
     <!-- WITH this --> 
     <md-icon ng-click="a_person.editMode = true">edit</md-icon> 
    </md-button> 

    <span ng-hide="a_person.editMode">{{a_person.name}}</span> 
    <!-- 
    <input ng-if="a_person.editMode" type="text" value="{{a_person.name}}"> 
    --> 
    <!-- USE ng-model directive --> 
    <input ng-show="a_person.editMode" type="text" ng-model="a_person.name"> 

</div> 

Ich empfehle ng-show/ng-hide verwenden, da die ng-if Richtlinie ein Kind Umfang erzeugt, die mit der ng-model Richtlinie kämpfen, die auf diesem Element keinen Raum erwartet. Auch ng-if hat viel mehr Overhead, weil es kompiliert/zerstört DOM, während die andere nur CSS-Stil ändert.

Answer 3

dieses Versuchen wird es nach Ihren Erwartungen arbeiten:

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.persons = { 
 
     "data": [ 
 
     { 
 
      id:1, 
 
      name:"name1" 
 
     }, 
 
     { 
 
      id:2, 
 
      name:"name2" 
 
     }, 
 
     { 
 
      id:3, 
 
      name:"name3" 
 
     } 
 
     ] 
 
    }; 
 
    
 
    $scope.showInput = function(personid) { 
 
     $scope.editperid = personid; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
     <div ng-repeat="person in persons.data"> 
 
      <a ng-click="showInput(person.id)">edit</a> 
 
     <span ng-hide="editperid == person.id">{{person.name}}</span> 
 
     <input ng-show="editperid == person.id" type="text" value="{{person.name}}"> 
 
    </div> 
 
</div>