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范围变量将绑定到相应的列表并重复。简单干净。

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

1 个答案: