AngularJS recursive(귀속)
답은ng-include 명령을 사용하여 템플릿으로 돌아가는 것입니다.만약 우리가 다음과 같은 데이터를 가지고 있다면:
$scope.categories = [
{
title: 'Computers',
categories: [
{
title: 'Laptops',
categories: [
{
title: 'Ultrabooks'
},
{
title: 'Macbooks'
}
]
},
{
title: 'Desktops'
},
{
title: 'Tablets',
categories: [
{
title: 'Apple'
},
{
title: 'Android'
}
]
}
]
},
{
title: 'Printers'
}
];
// 우리의 목표는 하나의 트리를 보여주는 것이다. 이때 우리는 하나의 템플릿을 사용하여 트리의 모든 단계를 렌더링해야 한다. 먼저 내부 연결 템플릿을 정의해야 한다.
<script type="text/ng-template" id="categoryTree">
{{ category.title }}
<ul ng-if="category.categories">
<li ng-repeat="category in category.categories" ng-include="'categoryTree'">
</li>
</ul>
script>그런 다음 루트 노드에서 반복 템플릿을 참조합니다.
<ul>
<li ng-repeat="category in categories" ng-include="'categoryTree'">li>
ul> 실현 원리:
ng-repeat는 데이터가 교체될 때마다 하위 scope를 만듭니다.우리가 템플릿에서 인용한category 변수는 현재의 교체에 속한다. 템플릿이 정상적으로 작동할 수 있는 이유는 템플릿 내부와 외부에서 같은 변수category를 사용했기 때문이다.다른 변수 이름을 사용하고 싶다면ng-init를 사용하여 초기화해야 합니다.
<li ng-repeat="parentCategory in categories"
ng-include="'categoryTree'"
ng-init="category=parentCategory">
li> 참조:http://benfoster.io/blog/angularjs-recursive-templates
다음으로 전송:https://www.cnblogs.com/kuangliu/p/4146705.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
