반응형
AngularJS - ng여러 개체 유형으로 반복
저는 아이템 목록을 가지고 있습니다.항목은 여러 가지가 될 수 있습니다. 예를 들어 목록은 다음과 같습니다.
[userObject , vehicleObject , userObject , animalObject , animalObject]
이제 객체의 종류에 따라 템플릿을 사용할 ngRepeat 디렉티브로 목록을 렌더링합니다(Polymorphic rendering).할수있을까요?
(ng-use는 가상적으로 지시하는 것입니다.)
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API 참조:
http://docs.angularjs.org/api/ng.directive:ngSwitch
이것은 ng-switch를 사용하지 않지만 @DotNetHaggis가 지적한 type 필드가 없다는 문제를 해결합니다.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>
언급URL : https://stackoverflow.com/questions/14425497/angularjs-ngrepeat-with-multiple-object-types
반응형
'it-source' 카테고리의 다른 글
도커 이미지의 sha256 코드는 어디서 찾을 수 있습니까? (0) | 2023.10.08 |
---|---|
문자열을 숫자로 변환하고 하나를 추가합니다. (0) | 2023.10.08 |
시간 충돌 없이 예약 추가 (0) | 2023.10.08 |
웹팩으로 필요한 경로 해결 (0) | 2023.10.08 |
jQuery $.ajax 또는 $.load가 responseType arrayBuffer를 허용합니까? (0) | 2023.10.08 |