<ul>
<li ng-repeat="folder in folderNames" ng-include="'test.html'">
</li>
</ul>
<script type="text/ng-template" id="test.html">
<ul> {{ folder.name }}
<li ng-repeat="folder in folder.children" ng-include="test.html"></li>
</ul>
</script>
<script>
$scope.folderNames = [{
name: 'a',
children: [{
name: 'b',
children: []
}]
}];
</script>
데이터를 트리처럼 출력하고 싶지만 ng-click 이벤트 함수를 사용하여 $ scope.folderNames 값을 변경할 때 실제로 뷰가 변경되지 않는 이유는 무엇입니까? 어떻게 할 수 있습니까?
이렇게 해보세요.
var app = angular.module("myApp",[]);
app.controller('ctrl',['$scope', function($scope){
$scope.showFolders = function(){
$scope.folderNames = [{
name: 'app',
children: [{
name: 'css',
children: []
},{
name: 'images',
children: []
}]
},{
name: 'folter1',
children: [{
name: 'sub-folder1',
children: []
},{
name: 'sub-folder2',
children: [{ name: 'sub-folder 2.1',children: [{
name: 'second-sub-of-sub',children: []},{
name: 'sub-of-sub',
children: []
}]
},{
name: 'sub-of-2.2',
children: []
}]
}]
}];
}
}]);<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ctrl">
<button ng-click="showFolders()">View folders</button>
<ul>
<li ng-repeat="folder in folderNames">
{{ folder.name }}
<ul ng-include="'test.html'"></ul>
</li>
</ul>
</div>
<script type="text/ng-template" id="test.html">
<li ng-repeat="folder in folder.children">{{folder.name}}<ul ng-include="'test.html'"></ul>
</li>
</script>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다