有条件的 ng-repeat ui-router答案

【问题标题】：Conditional ng-repeat ui-router有条件的 ng-repeat ui-router
【发布时间】：2017-11-24 13:20:44
【问题描述】：

我正在为 Angular js 使用 ui 路由器（$routeprovider 和 $locationprovider）。我想根据当前的 url/路由更改在 ng-repeat 中循环遍历的数组。我在堆栈上阅读了类似的帖子，但找不到我的问题的确切解决方案。

这些是我的路线

   .when('/limited', {
          template: '<di-home></di-home>',
          activeTab: 'home',
          caseInsensitiveMatch: true,
      })

   .when('/all', {
          template: '<di-home></di-home>',
          activeTab: 'home',
          caseInsensitiveMatch: true,
      })

当 url 更改时，我想使用某种 if 语句将 ng-repeat 从“Ctrl.data.all 中的事物”更改为“Ctrl.data.limited 中的事物”。

<md-card class="md-whiteframe-4dp" ng-repeat="things in Ctrl.data.all" flex-xs="100" flex-sm="100" flex-md="45" flex-gt-md="30"></md-card>

实现这一目标的最佳方法是什么？你能指出我正确的方向/类似的帖子吗？谢谢！

【问题讨论】：

标签： javascript angularjs url angular-ui-router angularjs-ng-repeat

【解决方案1】：

在您看来，不要这样做，这是您的控制器的工作。保持视图简单：

<md-card ng-repeat="things in dataToDisplay"></md-card>

然后在控制器中，根据您的 URL，设置 $scope.data:

if($location.path() === '/limited') {
    $scope.dataToDisplay = $scope.data.limited;
} else if($location.path() === '/all') {
    $scope.dataToDisplay = $scope.data.all;
}

PS：别忘了在你的控制器中注入$location。

【讨论】：

我需要注入$location吗？
@andrea 是的，将其注入您的控制器中
我无法让它工作。我的 html 现在看起来和你的例子一模一样，我的 js 看起来像这样： Controller.$inject = ['$scope', 'update', '$document', '$location']; /* @ngInject */ function Controller($scope, update, $document, $location) { var NewsCtrl = this; if ($location.path() === '/home') { NewsCtrl.dataToDisplay = NewsCtrl.data.all; } else if ($location.path() === '/limited') { NewsCtrl.dataToDisplay = NewsCtrl.data.limited; }