web-dev-qa-db-ja.com

angle.js ng-repeat-条件が真であるかどうかを確認してから、別のコレクションを使用します

ng-repeat内で使用するコレクションを確認することは可能ですか？

たとえば、私のコントローラーでは、サーバーからフェッチされたデータの2つの配列がありますが、今はng-switchを使用してそれらを切り替えています。このjsbinを確認してください--- http://jsbin.com/diyefevi/1/edit ？html、js、output

問題は、私の実際のアプリケーションのこれらのliビューは大きいが、非常に似ていることです。したがって、私は本当にしたいです2の代わりに1ng-repeatを使用します。

では、Angularでng-repeat="book in if list==='adultBooks' adultBooks else childBooks"のようなものが可能かどうか疑問に思いますか？

ありがとう！

javascriptangularjsif-statementangularjs-ng-repeatng-repeat
7
Kosmetika

これを試して ...

あなたのコントローラー

$scope.getDataSource=function(condition){

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

あなたのHtml

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

MVVMパターンは、ロジックをビュー（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

23
Dalorzo

私が考えることができる最も簡単な解決策は、必要なときに他の配列を設定するスコープに新しい配列を定義することです。

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

2
Augier

このようなものは、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コード

2
zszep