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
编辑:这是我看到的图片
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>