javascript - ng-repeat 基于点击的数据切换

Question

你好，我是 Angular js 新手

是否可以在不更改 dom 的情况下在点击时进行 ng-repeat 数据更改？

see Example

在此示例中 - 当单击“名称”选项卡时，显示“名称”数组中的名称列表，与单击“ids”选项卡然后将内容替换为 ids 列表时相同

是否可以从具有相同 dom 元素的 Controller 进行管理？

<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in names">{{name.name}}</li>
</ul>

var myApp = angular.module('myApp', []);

myApp.controller('testController', function ($scope) {
    $scope.names = [
        {name : 'nameOne'},
        {name : 'nameTwo'},
        {name : 'nameThree'},
        {name : 'nameFour'},
        {name : 'nameFive'}
    ];

       $scope.IDs = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
    ];    

});

谢谢

Answer 1

你可以尝试这样的事情

<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>

在 Controller 中

  //default empty - but you could set it to a default like $scope.myRepeat = $scope.names;
  $scope.myRepeat = [];

 $scope.changeToName = function(){
     $scope.myRepeat = $scope.names;
 };

   $scope.changeToID = function(){
     $scope.myRepeat = $scope.IDs;
 };

我只是在 $scope.myRepeat 之间放置了一个不同的作用域变量来重复数据，您可以通过一些点击功能切换其中的数据。您可以将其默认为 $scope.names 作为其值，也可以将其默认为空数组，具体取决于您希望如何使用它。

FIDDLE - http://jsfiddle.net/8s4afddv/2/