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

时间:2015-07-08 18:01:10

标签: javascript html angularjs frontend

您好我是角度js的新手

是否可以在没有dom更改的情况下更改ng-repeat数据?

see Example

在此示例中 - 点击'命名'选项卡然后显示姓名列表中的姓名列表。数组,与点击' ids'选项卡然后用ids列表替换内容

是否可以从具有相同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'}
    ];    

});

由于

3 个答案:

答案 0 :(得分: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;
 };

我只是在ng-repeat数据$scope.myRepeat之间放置了一个不同的范围变量,你可以用一些点击功能切换数据。您可以将其默认为$scope.names,因为它的值或空数组取决于您希望如何使用它。

FIDDLE - What is reflection and why is it useful?

答案 1 :(得分:1)

您可以执行以下操作:

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

});

答案 2 :(得分:1)

我就是这样做的。如果我有更多的时间id将整个事物构建到它自己的指令中(顶部的按钮仍然让我感到困扰),但这应该让你开始(因为我使用了角度,它已经有一段时间了,对不起!)

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>