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

【问题标题】：ng-repeat data switch based on clickng-repeat 基于点击的数据切换
【发布时间】：2015-09-26 19:28:28
【问题描述】：

你好，我是 Angular js 的新手

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

在此示例中 - 当点击“名称”选项卡然后显示“名称”数组中的名称列表时，与单击“ID”选项卡然后内容替换为 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'}
    ];    

});

谢谢

【问题讨论】：

你能解释一下你的意思用相同的dom元素从控制器管理吗？

标签： javascript html angularjs frontend

【解决方案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 作为它的值，或者一个空数组，这取决于您希望如何使用它。

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

【讨论】：

【解决方案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;

});

【讨论】：

【解决方案3】：

我就是这样做的。如果我有更多的时间将整个东西构建到它自己的指令中（顶部的按钮仍然让我感到困扰），但这应该让你开始（我使用角度已经有一段时间了，对不起！）

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>

【讨论】：