在 ng-repeat 中带有表单的 ngif答案

【问题标题】：ngif with a form inside a ng-repeat在 ng-repeat 中带有表单的 ngif
【发布时间】：2016-12-31 17:20:45
【问题描述】：

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

人名使用 span 标签显示。还有一个按钮可以隐藏 span 并显示一个包含人名的输入字段，以便可以对其进行编辑。

当我按下一个按钮时，我需要将受影响的 span“转换”为 input，但它不起作用并且所有 span被转换为输入。

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

我使用的是表格和表格，但我没有在此处显示它们以便于解释。

【问题讨论】：

@KarthikVU 这会有什么不同？
显示showInput() 的代码并在plunker 或codepen 或任何其他沙箱中提供minimal reproducible example
你检查我的答案了吗？

标签： angularjs angularjs-ng-repeat angular-ng-if

【解决方案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}}">

希望你能明白。

【讨论】：

这不应该是必要的，因为 OP 将每个人的编辑模式保留在人本身（这是一个更好的主意，顺便说一句）

【解决方案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 样式。

【讨论】：

【解决方案3】：

试试这个，它会按照你的期望工作：

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>

【讨论】：