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

I'm wondering is it possible to check what collection to use inside ng-repeat?

我想知道是否有可能检查在ng-repeat中使用哪些集合？

For example, in my controller I have 2 arrays of data fetched from server, now I use ng-switch to switch between them, check this jsbin - http://jsbin.com/diyefevi/1/edit?html,js,output

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

The problem is that these li views in my real application are big but very similar.. so I really would like to use 1 ng-repeat instead of 2.

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

So I wonder if something like ng-repeat="book in if list==='adultBooks' adultBooks else childBooks" is possible in Angular?

所以我想知道在Angular中是否可以使用ng-repeat =“book in if list ==='adultBooks'neathBooks else childBooks”？

Thanks!

谢谢！

3 个解决方案

#1

Try this ...

尝试这个 ...

In your controller

在你的控制器中

$scope.getDataSource=function(condition){

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

In your Html

在你的Html中

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

MVVM Pattern advises to put our logic always in the controller and not in the view(HTML). If you ever find yourself adding "logic" in your view probably there is an alternate "better" way to do it.

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

But just for "fun" you can do this too:

但只是为了“有趣”，你也可以这样做：

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

Like this:

喜欢这个：

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

Here is the full sample:

以下是完整示例：

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

#2

The simplest solutions I can think of would be to define a new array on the scope which you set the other arrays to when you need.

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

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

例如。 http://jsbin.com/diyefevi/4/edit?html,js,output

#3

Something like this would eliminate the need for ng-switch:

这样的事情将消除对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>

and the js:

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

Here is the jsbin code

这是jsbin代码

#1