AngularJS替换列表时，点击NG-点击NG-重复

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> 

现在的角：

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

现在，当您选择时，chosenFeatures范围变量wil我会绑定到适当的列表并重复。简单而干净。