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"
        }];
    };
     
};