Question

我有一个名为polls的数组，其中包含许多对象poll。每个轮询都有一个属性moduleState，它最初设置为字符串“notVoted”。稍后可以将单个民意调查的moduleState设置为字符串“voteed”。这是我的一个部分模板：

<div ng-init="loadPage()">
    <div ng-repeat="poll in polls">
        <div ng-if="poll.moduleState  === 'notVoted'">
          //Template 1
        </div>
        <div ng-if="poll.moduleState === 'voted'">
          //Template 2
        </div>
    </div>
</div>

问题是，两个模板都用于民意调查中的每个民意调查。因此，如果数组轮询中有3个轮询对象，则部分将推出：

模板1

模板2

模板1

模板2

模板1

模板2

我怀疑这是因为ng-if和ng-repeat之间的奇怪交互。我怎样才能得到它，因此每个民意调查只显示一个模板？

编辑：根据要求，这是一个poll对象的console.log。如您所见，moduleState实际上设置为“notVoted”

Answer 1

即使这不是答案，但这篇文章代表了我们应该如何解决这类问题。

<div ng-init="loadPage()">
    <div ng-repeat="poll in polls">
        <span>poll.moduleState: {{poll.moduleState}}</span>
        <div ng-if="poll.moduleState  === 'notVoted'">
          //Template 1
        </div>
        <div ng-if="poll.moduleState === 'voted'">
          //Template 2
        </div>
    </div>
</div>

注意我已经引入了测试范围来检查循环迭代的时间以及该轮询对象属性的值。

除此之外，您还可以使用一些从当前运行时ng绑定中提取属性值的chrome扩展，并在开发人员工具中显示。您可以找到该工具here。探索如何利用该工具找出dom元素中绑定的值并解决您的问题。：）

希望这会对你有所帮助。

Answer 2

你的代码很好 - 如果在ng-repeat中工作：

HTML：

   <div>
    <div ng-repeat="poll in polls">
        <div ng-if="poll.moduleState  === 'notVoted'">
          <!-- Template 1 -->
          Not Voted: {{poll.name}}
        </div>
        <div ng-if="poll.moduleState === 'voted'">
          <!-- Template 2 -->
          Voted: {{poll.name}}
        </div>
    </div>
</div>

</div>

角：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

        $scope.polls =
            [
                {
                    "name": "module1",
                    "moduleState": "notVoted"
                },
                {
                    "name": "module2",
                    "moduleState": "voted"
                }
            ];

});

这是显示ng-if如果使用ng-repeat：https://jsfiddle.net/AKMorris/nkqkunfr/

的小提琴

Answer 3

我面临着同样的问题。老实说仍然不知道为什么，但是我以另一种方式来做它，例如使它反向，例如，上面的例子应该是这样的：

<div ng-if="poll.moduleState  === 'notVoted'">
   <div ng-repeat="poll in polls">
     //Template 1
  </div>
</div>
<div ng-if="poll.moduleState === 'voted'">
  <div ng-repeat="poll in polls">
    //Template 2
  </div>
</div>

使用ng-if内部ng-repeat不起作用

3 个答案: