AngularJS在单击ng-click ng-repeat时替换列表

Question

HTML

<ul class="feature-list-1">
    <li ng-repeat="(key, value) in features" ng-click="featureSelect(key)">{{key}}</li>
</ul>

ANGULARJS

$scope.features =
{
    "administrative": [
        { id: 1, val: "Country"},
        { id: 2, val: "Province"},
        { id: 3, val: "Locality"},
        { id: 4, val: "Neighborhood"},
        { id: 5, val: "Land parcel"}
    ],
    "landscape": [
        { id: 1, val: "Man made"},
        { id: 2, val: "Natural"}
    ]
};

$scope.featureSelect = function(i) {
    $('.feature-list li').remove();
    $.each( $scope.features[i], function(i,v){
        $('.feature-list').append('<li>'+v.val+'</li>');
    });
}

我正在学习AngularJS,我在这里尝试做的是当初始列表中的项目被点击时它将是administrative或者landscape,我希望列表清除然后用仅有Angular的嵌套数据替换值.在示例Plunker我使用jQuery来替换内容,我知道它没有效率,因为我希望能够正确地做到这一点.

例如.如果landscape单击,列表将清除并由Man made和替换Natural

Plunker

Answer 1

这是我将如何做到这一点,让另一个列表绑定到转发器:

<ul class="feature-list-1">
    <li ng-repeat="(key, value) in features" ng-click="featureSelect(key)">{{key}}</li>
</ul>

<ul>
    <li ng-repeat="feature in chosenFeatures">{{feature}}</li>
</ul>

现在为Angular:

$scope.featureSelect = function(key) {
    $scope.chosenFeatures = $scope.feature[key];
}

现在,当您选择时,chosenFeatures范围变量将绑定到相应的列表并重复.简单干净.