Question

我使用 ngRepeat 指令来显示人员的数据（现在我只显示人员的姓名）。

使用 span 标记显示此人的姓名。此外，还有一个隐藏范围的按钮，并显示包含此人姓名的输入字段，以便可以编辑。

当我按下按钮时，我需要受影响的范围进行转换＆＃34; 输入，但它不起作用，所有范围都转换为输入。

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

        <md-button aria-label="Show inputs">
            <md-icon ng-click="showInput(a_person)">edit</md-icon>
        </md-button>

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

    </div>

我正在使用桌子和表格，但我不在这里展示，所以很容易解释。

Answer 1

您需要保留一个布尔数组，以跟踪显示ng-repeat中每个项目的输入字段或范围。

$scope.showEdit = new Array(n)

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

最后

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

希望你明白这一点。

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>

我建议使用ng-show / ng-hide，因为ng-if指令会创建一个子范围，该范围将与ng-model指令对抗，该指令不希望该元素具有范围。另外ng-if有更多的开销，因为它编译/销毁DOM，而另一个只改变CSS样式。

Answer 3

尝试一下，它会按照您的期望运作：

＆＃13;

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

＆＃13;

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

＆＃13;

ngif在ng-repeat中有一个表单

3 个答案: