Question

我想知道是否可以检查ng-repeat内要使用的集合？

例如，在我的控制器中，我有两个从服务器获取的数据数组，现在我使用ng-switch在它们之间切换，请检查这个jsbin - http://jsbin.com/diyefevi/1/edit?html,js,output

问题是我的实际应用中的这些li视图很大但很相似..所以我真的想使用1 ng-repeat而不是2 。< / p>

所以我想知道在Angular中是否可以使用ng-repeat="book in if list==='adultBooks' adultBooks else childBooks"这样的东西？

谢谢！

Answer 1

试试这个......

在控制器

中

$scope.getDataSource=function(condition){

  if(condition){ return dataSource1; }
  return dataSource2;
};

在 Html

中

ng-repeat="book in getDataSource(/*condition*/)

MVVM Pattern建议将我们的逻辑始终放在控制器中，而不是放在视图中（HTML）。如果您发现自己在视图中添加了“逻辑”，那么可能还有另一种“更好”的方法。

但只是为了“ fun ”你也可以这样做：

ng-repeat="book in {true: adultBooks, false: childBooks}[list==='adultBooks']"

像这样：

<li ng-repeat="book in {true: childBooks, false:adultBooks}[list==='childBooks']">{{book.name}

以下是完整的示例：

http://jsbin.com/diyefevi/5/edit?html,js,output

Answer 2

我能想到的最简单的解决方案是在范围内定义一个新数组，在需要时将其他数组设置为。

E.g。 http://jsbin.com/diyefevi/4/edit?html,js,output

Answer 3

这样的东西将消除对ng-switch的需求：

<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
  <a href="" ng-click="toggleList()">Toggle List</a>
  <h1>{{list}}</h1>
  <ul>
      <li ng-repeat="book in getBooks()">{{book.name}}</li>
  </ul>
</body>
</html>

和js：

var app = angular.module('test', []);
app.controller('MainCtrl', function ($scope) {
  $scope.list = 'childBooks';

  $scope.childBooks = [{name: 'Dodobird'}, {name: 'Catty Red Hat'}];

  $scope.adultBooks = [{name: 'Little Lady'}, {name: 'Johny Doe'}];

  $scope.toggleList = function () {
    $scope.list = $scope.list === 'childBooks' ? 'adultBooks' : 'childBooks';
  };

  $scope.getBooks = function() {
    if($scope.list == 'adultBooks') {
      return $scope.adultBooks;
    } else {
      return $scope.childBooks;
    }
  }
});

以下是jsbin code

angular.js ng-repeat - 检查条件是否为真然后使用另一个集合

3 个答案: