반응형
ng-if를 ng-repeat 내의 스위치로 사용합니까?
나는 Angular 앱을 만들고 있다.ng-if를 사용하여 ng-repeat으로 전환하려고 했지만 실패했습니다.다음과 같은 데이터가 있습니다.
**[{"_id":"52fb84fac6b93c152d8b4569",
"post_id":"52fb84fac6b93c152d8b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"hoot",},
{"_id":"52fb798cc6b93c74298b4568",
"post_id":"52fb798cc6b93c74298b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"story",},
{"_id":"52fb7977c6b93c5c2c8b456b",
"post_id":"52fb7977c6b93c5c2c8b456a",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"article",},**
$126.199 = 위에서 언급한 데이터
그리고 내 HTML은 다음과 같다:
<div ng-repeat = "data in comments">
<div ng-if="hoot == data.type">
//differnt template with hoot data
</div>
<div ng-if="story == data.type">
//differnt template with story data
</div>
<div ng-if="article == data.type">
//differnt template with article data
</div>
</div>
앵귤러에서 이걸 어떻게 해?
에워싸다strings
(hoot
,story
,article
따옴표 포함)'
:
<div ng-repeat = "data in comments">
<div ng-if="data.type == 'hoot' ">
//different template with hoot data
</div>
<div ng-if="data.type == 'story' ">
//different template with story data
</div>
<div ng-if="data.type == 'article' ">
//different template with article data
</div>
</div>
이것도 주목할 만하다
<div ng-repeat="post in posts" ng-if="post.type=='article'">
<h1>{{post.title}}</h1>
</div>
모든 템플릿을 다른 파일로 이동하고 반복 내에서 스페게티는 하지 않는 것이 좋습니다.
여기를 봐주세요.
html:
<div ng-repeat = "data in comments">
<div ng-include src="buildUrl(data.type)"></div>
</div>
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.comments = [
{"_id":"52fb84fac6b93c152d8b4569",
"post_id":"52fb84fac6b93c152d8b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"hoot"},
{"_id":"52fb798cc6b93c74298b4568",
"post_id":"52fb798cc6b93c74298b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"story"},
{"_id":"52fb7977c6b93c5c2c8b456b",
"post_id":"52fb7977c6b93c5c2c8b456a",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"article"}
];
$scope.buildUrl = function(type) {
return type + '.html';
}
});
http://plnkr.co/edit/HxnirSvMHNQ748M2WeRt?p=preview
언급URL : https://stackoverflow.com/questions/21751676/using-ng-if-as-a-switch-inside-ng-repeat
반응형
'it-source' 카테고리의 다른 글
스프링 부트 2.6 회귀:어댑터의 Keyclock 순환 의존성을 수정하려면 어떻게 해야 합니까? (0) | 2023.02.16 |
---|---|
WordPress 플러그인에서 TinyMCE 호출 (0) | 2023.02.16 |
AngularJS 자원 약속 (0) | 2023.02.16 |
어레이 파괴 시 유형 (0) | 2023.02.16 |
Chrome에서 iframe을 로드할 때 'load' 이벤트가 발생하지 않음 (0) | 2023.02.16 |