ng-repeat track by xxx
使用级联菜单时,避免父级的数据的变化,影响子集的所有DOM元素。
by owen_pengtao
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body ng-controller="duplicateCtrl" ng-app="">
<div class="list-group">
<label class="list-group-item" ng-repeat="project in projects">
<input type="checkbox" ng-click="selectProjects(project.id)" name="projectIds[]" ng-value="{{project.id}}"> <span>{{project.projectName}}</span>
</label>
</div>
<div class="list-group">
<label class="list-group-item" ng-repeat="request in requests track by request.id">
<input type="checkbox" name="requestIds[]" ng-value="{{request.id}}" checked> <span>[{{request.methodType}}] {{request.requestUrl}}</span>
</label>
</div>
</body>
JavaScript
function duplicateCtrl($scope, $http) {
$scope.projects = [{
"id": "3",
"projectName": "Tibco Silver Fabric"
}, {
"id": "2",
"projectName": "Skyway"
}, {
"id": "1",
"projectName": "API Exchange"
}];
$scope.requests = [];
$scope.selectProjects = function ($event) {
$scope.requests = [{
"id": "9",
"requestUrl": "\/index.php?option=com_cobalt&task=ajaxmore.getUserByUid&uid=129",
"isFakeServer": "1",
"methodType": "GET"
}, {
"id": "8",
"requestUrl": "\/index.php?option=com_cobalt&task=ajaxmore.getUserByUid&uid=129",
"isFakeServer": "0",
"methodType": "GET"
}, {
"id": "7",
"requestUrl": "\/index.php\/products\/item\/5-reference\/231-book-catalog",
"isFakeServer": "0",
"methodType": "POST"
}, {
"id": "6",
"requestUrl": "\/index.php?option=com_cobalt&task=ajaxmore.getUserByUid&uid=129",
"isFakeServer": "0",
"methodType": "GET"
}, {
"id": "5",
"requestUrl": "\/skyway\/rest\/v1\/skyway\/stacks",
"isFakeServer": "0",
"methodType": "GET"
}];
};
};