ngShow和ngHide当在ngRepeat循环，按钮添加元素只有第一次显示了所有元素

我有这样的问题：ngShow和ngHide当在ngRepeat循环，按钮添加元素只有第一次显示了所有元素

里面一个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; 
    }; 
};

你可以看到的jsfiddle http://jsfiddle.net/gserra/NG76R/1/

的效果进行测试，第一次点击添加按钮，看看显示所有表格。然后重新加载，然后首先点击编辑，然后点击提交。之后，如果您单击添加按钮，则只会显示新表单。

来源

2014-02-28 guillem serra

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

http://jsfiddle.net/773Pf/

很可能有不同的方式来实现你想要所以我就告诉你，现在是错的。一个提示：研究JavaScript中的继承特别是对象与原语。

来源

2014-02-28 18:01:55 NicolasMoise

看到这个小提琴http://jsfiddle.net/nicolasmoise/X9KYU/4/在那里我举例说明如何继承可以cuase问题。 – NicolasMoise

这是我的想法，但我不明白的是为什么点击编辑，然后在其中一个提交，然后点击添加按钮，它不会重现相同的效果，只显示最后添加的表单一。 –

因为在那时你已经定义了本地'$ scope.edit'，所以它们不再受父母改变的影响（你可以在我的最后一个小提琴中完成相同的操作：使用基元'$ scope.msg = “你好”'）。我建议每个触发器都有一个编辑变量。 – NicolasMoise

添加到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/

我认为这是应该有的如果我理解正确，则解决您的问题。

来源

2014-08-06 08:08:03

ngShow和ngHide当在ngRepeat循环，按钮添加元素只有第一次显示了所有元素

回答

相关问题