ngShow 和 ngHide 在 ngRepeat 循环中，按钮仅在第一次显示所有元素时添加元素答案

【问题标题】：ngShow and ngHide when in a ngRepeat loop, button to add element only first time it shows all the elementsngShow 和 ngHide 在 ngRepeat 循环中，按钮仅在第一次显示所有元素时添加元素
【发布时间】：2014-02-28 17:04:15
【问题描述】：

我有这个问题：

在 ngRepeat 循环中，表单元素是隐藏的，只有在为每个元素单击编辑按钮时才会显示。

最后还有一个按钮，可以将元素添加到列表中，它应该只显示新添加的空元素的表单。

当第一次点击添加按钮时，所有的表格都会显示出来——这显然不是故意的——。但是，如果我显示表单元素然后隐藏它们（提交表单），当我单击添加按钮时，它不会显示所有表单，只显示新的表单 - 我真正想要的 -。

代码很简单：

<div ng-controller='TriggerCtrl' ng-model='triggers'>
    <ul>
        <li ng-repeat='trigger in triggers'>
            <span ng-hide='edit'>{{trigger.operator}}</span>
            <button ng-click='edit=!edit' ng-hide='edit'>Edit</button>
            <form name='editTrigger' ng-show='edit' ng-submit='submit'>
                <select ng-model='trigger.operator' ng-options='op.value as op.name for op in operators' />
                <input id='submit' type='submit' value='Submit' ng-click='edit=!edit' />
            </form>
        </li>
    </ul>
    <button ng-click='add()'>Add</button>
</div>

还有 javascript：

function TriggerCtrl($scope) {
  $scope.triggers = [
    {operator: 'gt'}, 
    {operator: 'gte'}
  ];

  $scope.operators = [
    {name: 'greater than', value: 'gt'}, 
    {name: 'greater than equal', value: 'gte'}
  ];

  $scope.add = function () {
    $scope.triggers.push({});
    $scope.edit = true;
  };
};

可以在jsfiddlehttp://jsfiddle.net/gserra/NG76R/1/看到效果

要对其进行测试，首先单击添加按钮，然后查看所有表单均已显示。然后重新加载，然后首先单击编辑，然后单击提交。之后，如果你点击添加按钮，只会显示新的表单。

【问题讨论】：

标签： javascript html forms angularjs

【解决方案1】：

这是范围继承的问题。基本上你的主控制器中有一个$scope.edit，你的 ng-repeat 的每次迭代都有它自己的$scope.edit。如果您更改父作用域/控制器中的$scope.edit，它将更改子$scope.edit，但更改子$scope.edit（例如，当您单击提交按钮时）不会更改全局$scope.edit .请参阅我试图证明这一点的小提琴：

http://jsfiddle.net/773Pf/

可能有不同的方法可以实现你想要的，所以我现在就告诉你哪里出了问题。一个提示：研究 javascript 中的继承，特别是对象与原语。

【讨论】：

看这个小提琴jsfiddle.net/nicolasmoise/X9KYU/4，我在这里举例说明了继承如何解决问题。
这是我想的，但我不明白为什么点击编辑，然后在其中一个提交，然后点击添加按钮，它不会重现相同的效果，显示只有上次添加的表单。
因为此时您已经定义了本地$scope.edit，因此它们不再受父级更改的影响（您可以在我最后的小提琴中完成相同的操作：使用原语@ 987654330@)。我建议为每个触发器设置一个 edit 变量。

【解决方案2】：

除了 NicolasMoise 的回答之外，您可以使用全局范围数组来记录您的各个条目的状态，而不是使用本地 $scope.edit。

html 可能是这样的：

        <li ng-repeat='trigger in triggers'>
            <p ng-hide='$parent.editArray[$index]'>{{trigger.type}} - {{trigger.operator}}</p>
            <form name='editTrigger' ng-show='$parent.editArray[$index]' ng-submit='submit'>
                <select ng-model='trigger.operator' ng-options='op.value as op.name for op in operators' />
                <input id='submit' type='submit' value='Submit' ng-click='$parent.editArray[$index]=!$parent.editArray[$index]' />
            </form>
        </li>

全局编辑按钮会像这样调用控制器中的函数：

$scope.toggleEdit = function() {
    $scope.edit = !$scope.edit;
    for (var i=0; i<$scope.editArray.length; i++)
        $scope.editArray[i]=$scope.edit;
}

这是解决您问题的小提琴：

http://jsfiddle.net/773Pf/2/

如果我理解正确的话，我认为这应该可以解决您的问题。

【讨论】：