在ng-if内部重复不工作

时间:2021-09-07 09:48:38

SOLUTION FOUND: I was just using a version of angular that did not support ng-if.

解决方案:我只是使用了一个不支持ng-if的角度版本。

Here is a simplified version of my code.

这是我的代码的简化版本。

First, my partial:

首先,我的部分:

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

And my controller:

我的控制器:

function ViewPollsCtrl($q, $scope, $http) {

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

I expect the output to be

我希望输出是

Not Voted: module1
Voted: module2

But instead the output is

但是输出是。

Not Voted: module1
Voted: module1
Not Voted: module2
Voted: module2

Why? What am I doing wrong? Is it because of a weird interaction between ng-if inside ng-repeat?

为什么?我做错了什么?这是因为ng-if内部的奇怪交互吗?

Edit: Here is an image of what I am seeing 在ng-if内部重复不工作

编辑:这是我看到的图片

1 个解决方案

#1


2  

It works fine with your code.

它可以很好地处理代码。

DEMO

演示

angular.module('myApp',[]).controller('myCtrl', function($scope){
  
  $scope.polls =
            [
                {
                    "name": "module1",
                    "moduleState": "not-voted"
                },
                {
                    "name": "module2",
                    "moduleState": "voted"
                }
            ];
          
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
    <div ng-repeat="poll in polls">
        <div ng-if="poll.moduleState  === 'not-voted'">
          <!-- Template 1 -->
          Not Voted: {{poll.name}}
        </div>
        <div ng-if="poll.moduleState === 'voted'">
          <!-- Template 2 -->
          Voted: {{poll.name}}
        </div>
    </div>
</div>
</div>

#1


2  

It works fine with your code.

它可以很好地处理代码。

DEMO

演示

angular.module('myApp',[]).controller('myCtrl', function($scope){
  
  $scope.polls =
            [
                {
                    "name": "module1",
                    "moduleState": "not-voted"
                },
                {
                    "name": "module2",
                    "moduleState": "voted"
                }
            ];
          
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
    <div ng-repeat="poll in polls">
        <div ng-if="poll.moduleState  === 'not-voted'">
          <!-- Template 1 -->
          Not Voted: {{poll.name}}
        </div>
        <div ng-if="poll.moduleState === 'voted'">
          <!-- Template 2 -->
          Voted: {{poll.name}}
        </div>
    </div>
</div>
</div>