创建我的第一个 AngularJS 应用程序。
A ng-repeat :er 加载标题。每个标题都是可点击的。单击标题时,ajax 调用会获取更多 JSON 数据。我需要在单击的标题下方添加此数据。
通常,我会将 HTML 创建为字符串并将其附加到源代码中。但是由于我使用的是 AngularJS,所以应该有一种方法可以使用 HTML 和另一个 创建局部 View 。 ng-repeat 在里面。
如何才能做到这一点?
最佳答案
我会按照@Nicolas 的建议使用指令。将此与@Andrew 建议的内容相结合,您可以做这样的事情。
Controller :
.controller('MainCtrl', function ($scope, $http) {
$scope.items = [
{id: 'a', subItems: []},
{id: 'b', subItems: []}
];
$scope.getSubItems = function(id) {
$http.get('/sub-items/' + id)
.then(function() {
$scope.items.subItems = $scope.items.subItems.push(response.data);
});
}
});
看法:
<div ng-repeat="item in items">
<a ng-click="getSubItems(item)">{{item.id}}</a>
<list sub-items="item.subItems"></list>
</div>
指示:
.directive('list', function() {
return {
restrict: 'E',
scope: {
subItems: '=subItems'
},
template: '<ul>' +
'<li ng-repeat="subItem in subItems">{{subItem.id}}</li>' +
'</ul>'
};
});
关于AngularJS:将局部 View 动态加载到页面中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16589172/