Question

如何在按钮单击时更改ng repeat collection以更改结果列表。

<li ng-repeat="item in collectionName">........</li>

我们可以在按钮单击时将集合名称决定为范围变量值。想法在每个选项卡上单击更改功能将更改范围变量值，这也会更改集合名称，从而更改结果列表。

控制器代码：

app.controller("LinkController", function($scope){
    $scope.linkRef='';
    $scope.List1=[{name:'tab1'},{name:'tab2'}];
    $scope.List2=[{name:'tab3'},{name:'tab4'}];   
    $scope.load=function(){
       //based on condition will change the linkRef to List1 or List2
       this.linkRef=List1     
    }
} );

ng-repeat中的collectionName应根据linkref值替换为List1或List2。

Answer 1

<a href="#" ng-click="collectionName=collection1"> tabl </a>
<a href="#" ng-click="collectionName=collection2"> tab2 </a>
<a href="#" ng-click="collectionName=collection3"> tab3 </a>
<a href="#" ng-click="collectionName=collection4"> tab4 </a>

Answer 2

JsFiddle

这是我的建议。

<强>控制器：

$scope.collections = [];
$scope.collections.push(['collection 1 content', 'item1', 'item2']);
$scope.collections.push(['collection 2 content', 'item3', 'item4']);

$scope.currentCollection = $scope.collections[0];

$scope.setCollection = function(val) {
    $scope.currentCollection = $scope.collections[val];
}

<强> HTML：

<ul>
    <li ng-click="setCollection(0)">TAB 1</li>
    <li ng-click="setCollection(1)">TAB 2</li>
</ul>
<ul>
    <li ng-repeat="item in currentCollection">{{item}}</li>
</ul>

更改按钮上的重复集合名称单击以更改结果列表

2 个答案: