it-source

AngularJS - ng여러 개체 유형으로 반복

criticalcode 2023. 10. 8. 09:57
반응형

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

반응형