[英]AngularJS, ng-repeat with ng-include not rendering
[英]AngularJS update $scope in ng-include and ng-repeat
<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>
我相信這是你正在尋找的片段。 它以任何類型的目錄深度遞歸地工作。
angular.element(document).ready(function(){
angular.module('application', [])
.directive("navigation", ['$compile',function ($compile) {
return {
restrict: 'E',
replace: true,
scope: {
menu: '='
},
template: '<ul><li ng-repeat="item in menu">{{item.Name}}<span ng-if="item.Children.length > 0"><navigation menu="item.Children"></navigation></span></li></ul>',
compile: function (el) {
var contents = el.contents().remove();
return function(scope,el){
$compile(contents)(scope,function(clone){
el.append(clone);
});
};
}
};
}])
.controller('myController', ['$scope','$log',function ($scope,$log) {
$log.log('In Controller');
$scope.menu = [{
Id: 1,
Name: "Contact",
Children: [{
Name: "Testing",
Children: []
},{
Name: "More Testing",
Children: [{
Name: '3rd Level',
Children: []
}]
}]
}];
}]);
angular.bootstrap(document,['application']);
});
在此查看在線示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.