Question

您好我是角度js的新手

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

在此示例中 - 点击＆＃39;命名＆＃39;选项卡然后显示姓名列表中的姓名列表。数组，与点击＆＃39; ids＆＃39;选项卡然后用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'}
    ];    

});

由于

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

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

FIDDLE - What is reflection and why is it useful?

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将整个事物构建到它自己的指令中（顶部的按钮仍然让我感到困扰），但这应该让你开始（因为我使用了角度，它已经有一段时间了，对不起！）

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>

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

3 个答案: