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

我有一个问题：

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

最后还有一个按钮，用于向列表中添加元素，它应该只显示添加的新空元素的表单

第一次单击“添加”按钮时，将显示所有表单-这显然不是有意的。但是，如果我显示表单元素，然后隐藏它们（提交表单），当我单击add按钮时，它不会显示所有表单，只显示新的表单（我实际想要的）

代码很简单：

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

您可以在JSFIDLE中看到效果

---

要测试它，首先单击“添加”按钮并查看是否显示了所有表单。然后重新加载，然后首先单击编辑，然后单击提交。之后，如果单击“添加”按钮，则只会显示新表单。

这是范围继承的问题。基本上，您在主控制器中有一个

$scope.edit

，ng repeat的每次迭代都有自己的

$scope.edit

。如果您在父范围/控制器中更改

$scope.edit

，它将更改子范围

$scope.edit

，但更改子范围

$scope.edit

（例如，当您单击提交按钮时）将不会更改全局

$scope.edit

。看看我的小提琴，我试着证明这一点：

---

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

添加到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;
}

{{trigger.type}-{{trigger.operator}

全局编辑按钮将调用控制器中的函数，如下所示：

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

$scope.toggleEdit=function（）{
$scope.edit=！$scope.edit；
对于（var i=0；我看了这把小提琴，在这里我举例说明了继承是如何解决问题的。这是我想的，但我不明白的是，为什么在编辑中单击，然后在其中一个中单击submit，然后单击add按钮，它不会重现相同的效果，只显示最后添加的表单。因为您已经定义了本地
$scope。编辑
，使其不再受父对象更改的影响（您可以在我的上一篇文章中完成相同的操作：使用原语
$scope.msg=“Hello”
）。我建议为每个触发器设置一个
edit
变量。