基於點擊的ng-repeat數據開關

Question

您好我是Angular JS的新手

點擊時是否可以更改ng-repeat數據而不更改dom？

參見示例

在此示例中-單擊“名稱”選項卡然后顯示“名稱”數組中的名稱列表時，與單擊“ ids”選項卡然后將內容替換為ID列表時相同

是否可以從具有相同dom元素的控制器進行管理？

<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>

在控制器中

  //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之間放置了另一個作用域變量ng-repeat數據，您可以使用一些單擊功能在其中切換數據。 您可以默認將其值包含$scope.names或為空數組，這取決於您希望如何使用它。

字段-http : //jsfiddle.net/8s4afddv/2/

Answer 2

您可以執行以下操作：

<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="item in lists()">{{item[prop]}}</li>
</ul>
<button onclick="list = 'id'"> Click to change to ID <button/>

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

myApp.controller('testController', function ($scope) {
    $scope.prop = "name";
    $scope.lists = function() {
    var list;
    if ($scope.list === "names") {
        $scope.prop = "name";
        list = [
          {name : 'nameOne'},
          {name : 'nameTwo'},
          {name : 'nameThree'},
          {name : 'nameFour'},
          {name : 'nameFive'}
        ];
      }
    } else if ($scope.list === "id") {
      $scope.prop = "id";
      list = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
      ];    
    }
    return list;

});

Answer 3

這就是我要做的。 如果我有更多的時間將id整個內容構建到它自己的指令中（頂部的按鈕仍然讓我感到困擾），但這應該可以讓您入門（因為我使用了angular，這已經有一段時間了，對不起！）

http://jsfiddle.net/8s4afddv/5/

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

myApp.controller('testController', function ($scope) {
    $scope.activeList = [];
    $scope.change = function(t){
     $scope.activeList = $scope[t];
    };

    $scope.names = [
        {name : 'nameOne'},
        {name : 'nameTwo'},
        {name : 'nameThree'},
        {name : 'nameFour'},
        {name : 'nameFive'}
    ];
    $scope.IDs = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
    ];    


})
.directive('myList', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<ul><li ng-repeat="name in activeList">{{ (name.name || name.id) }}</li></ul>'
  };
});

HTML：

<div ng-app="myApp" ng-controller="testController">
<div class="select" ><span class="active" ng-click="change('names')">Names</span> <span ng-click="change('IDs')">ID</span></div>

<my-list>
</my-list>

</div>