无法将 ng-if 与 ng-repeat 一起使用 - IT屋-程序员软件开发技术分享社区
首页 其他开发 无法将 ng-if 与 ng-repeat 一起使用
无法将 ng-if 与 ng-repeat 一起使用
[英] Unable to use ng-if with ng-repeat
本文介绍了无法将 ng-if 与 ng-repeat 一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我曾尝试在 ng-repeat 中使用 ng-if，但似乎 ng-if 无法正常工作.
我在 StackOverflow 中提到了几个论坛链接，但对我没有帮助.
我使用的是 Angular 版本 1.3.0
HTML
<html ng-app="myModule"><头><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><script src="/js/lib/angular-1.3.0/angular.js"></script><script src="/js/lib/controllers/ifRepeatController.js"></script><身体><div ng-repeat = "评论中的数据"><div ng-if="data.type == 'hootsslllll'">//不同的模板与热门数据 <div ng-if="data.type == '故事'">//具有故事数据的不同模板
<div ng-if="data.type == '文章'">//带有文章数据的不同模板
</html>控制器
var myIfRepeat = angular.module('myIfRepeat',[]);myIfRepeat.controller('IfRepeatController', function ($scope,$http) {$scope.comments = [{"_id":"1","post_id":"1","user_id":"UserId1","type":"hoot"},{"_id":"2","post_id":"2","user_id":"UserId2","类型":"故事"},{"_id":"3","post_id":"3","user_id":"UserId3",类型":文章"}];});根据第一个条件，不应该显示第一行(下面找到屏幕截图以供更多参考)，但是该行正在显示.
参考链接:
<div ng-repeat="评论中的数据"><div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//不同的模板与 hoot 数据</div><div ng-if="data.type == 'story' ">type={{data.type}}//带有故事数据的不同模板</div><div ng-if="data.type == 'article' ">type={{data.type}}//带有文章数据的不同模板</div>
函数 IfRepeatController($scope) {$scope.comments = [{"_id": "1","post_id": "1","user_id": "UserId1",类型":热"}, {"_id": "2","post_id": "2","user_id": "UserId2",类型":故事"}, {"_id": "3","post_id": "3","user_id": "UserId3",类型":文章"}];}
注意: 在此处参考 angular 1.3.0:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js
I was tried to use ng-if inside ng-repeat but it seems ng-if is not working properly.
I referred couple of forum links in StackOverflow but it doesn't help me.
I'm using angular version 1.3.0
HTML
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="/js/lib/angular-1.3.0/angular.js"></script>
<script src="/js/lib/controllers/ifRepeatController.js"></script>
</head>
<body>
<div ng-repeat = "data in comments">
<div ng-if="data.type == 'hootsslllll' ">
//differnt template with hoot data
</div>
<div ng-if="data.type == 'story' ">
//differnt template with story data
</div>
<div ng-if="data.type == 'article' ">
//differnt template with article data
</div>
</div>
</body>
</html>
Controller
var myIfRepeat = angular.module('myIfRepeat',[]);
myIfRepeat.controller('IfRepeatController', function ($scope,$http) {
$scope.comments = [
{"_id":"1",
"post_id":"1",
"user_id":"UserId1",
"type":"hoot"},
{"_id":"2",
"post_id":"2",
"user_id":"UserId2",
"type":"story"},
{"_id":"3",
"post_id":"3",
"user_id":"UserId3",
"type":"article"}
];
});
As per the first condition, the first line should not get displayed (Below find the screenshot for more reference), however the line is getting displayed.
the reference link : Using ng-if inside ng-repeat?
Now i added the controller in the div as advised, however i'm facing the same issue
Below i have given the screenshot for reference. Kindly help me how to solve this issue and please let me know in case of further clarifications.
Below provided screenshot on the working model used angular 1.3 version. If we use angular 1.0.2 the nf-if will not work properly (below provided the screenshot)
Screen shot for angular version 1.0.2
解决方案
I'm not having issues with this working. Tweaked your code to fit into a fiddle
<div ng-app ng-controller="IfRepeatController">
<div ng-repeat="data in comments">
<div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//differnt template with hoot data</div>
<div ng-if="data.type == 'story' ">type={{data.type}}//differnt template with story data</div>
<div ng-if="data.type == 'article' ">type={{data.type}}//differnt template with article data</div>
</div>
</div>
function IfRepeatController($scope) {
$scope.comments = [{
"_id": "1",
"post_id": "1",
"user_id": "UserId1",
"type": "hoot"
}, {
"_id": "2",
"post_id": "2",
"user_id": "UserId2",
"type": "story"
}, {
"_id": "3",
"post_id": "3",
"user_id": "UserId3",
"type": "article"
}];
}
Note: reference angular 1.3.0 here: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js
这篇关于无法将 ng-if 与 ng-repeat 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
