javascript - 如何使用 ng-repeat 返回不同的值(无重复)

Question

我正在使用 AngularJS 和 UI Router 制作多页表单。第一页为用户提供选项按钮，以选择他们想要过滤电影列表的方式(标题、流派或评级)。

我正在使用 switch 语句来过滤第二页上显示的内容。如果单击“标题”按钮，则仅显示标题。如果用户单击“流派”，那么他们将看到可用的流派等。

在大多数情况下，我的 switch 语句都有效，但是当我尝试显示可用的流派或评级时，我遇到了错误，因为我不想重复。我尝试使用 Angular 的 unique: 'genre'，但是当我添加它时，它什么也没有返回。

有什么建议吗？谢谢!

我的 HTML:

<label>Available Movies</label>
    <div class="form-group" ng-controller="formController">
        <h3>What Button was clicked: </h3>
            <div ng-switch on="Data.sortType">
                <div ng-switch-when="title">Title</div>
                <div ng-switch-when="genre">Genre</div>
                <div ng-switch-when="rating">Rating</div>
            </div>
        <h4>Show results: </h4>
     <div ng-switch on="Data.sortType">
         <div ng-switch-when="title">
              <div ng-repeat="movie in movies">{{movie.title}}</div>
         </div>

         <!-- Here's where I run into trouble: --> 
         <div ng-switch-when="genre">
             <div ng-repeat="movie in movies | unique: 'genre'">{{movie.genre}}</div>
         </div>
         <div ng-switch-when="rating">
              <div ng-repeat="movie in movies">{{movie.rating}}</div>
         </div>
     </div>
</div>

我的JS:

angular.module('movieApp', ['ngAnimate', 'ui.router'])

.factory('Data', function() {

    return { sortType: ''}; 
 })
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    // route to show our basic form (/form)
    .state('orderForm', {
        url: '/orderForm',
        templateUrl: 'orderForm.html',
        controller: 'formController'
    })
    .state('orderForm.step1', {
        url: '/step1',
        templateUrl: 'step1.html'
    })
     .state('orderForm.step2', {
        url: '/step2',
        templateUrl: 'step2.html'
    });

    $urlRouterProvider.otherwise('/orderForm/step1');
 })

 .controller('formController', ['$scope', 'Data', function($scope, Data) {

    $scope.formData = {};
    $scope.Data = Data; 

    //Create lists of Drinks:
    $scope.movies = [
        {title:'Get Hard ', genre: 'Comedy', rating: 'R'},
        {title:'Cinderella', genre: 'Romance', rating: 'PG'},
        {title:'Avengers ', genre: 'Action', rating: 'PG13'},
        {title:'Hot Pursuit', genre: 'Comedy', rating: 'PG13'},
        {title:'Age of Adaline', genre: 'Romance', rating: 'PG13'},
        {title:'Pitch Perfect 2', genre: 'Musical', rating: 'PG13'},
        {title:'Longest Ride', genre: 'Romance', rating: 'PG13'},
        {title:'Furious 7', genre: 'Action', rating: 'PG13'},
        {title:'Home', genre: 'Adventure', rating: 'PG'},
        {title:'Insurgent', genre: 'Action', rating: 'PG13'}
    ];
}]);

Answer 1

试试这个:

<div ng-repeat="movie.genre for movie in movies | unique: 'genre'">{{movie.genre}}</div>

您需要安装一些依赖项:

1. 在您的终端中，转到您的项目并运行以安装 angular-ui-utils unique:

bower install angular-ui-utils#bower-unique

2. 需要 unique.js 文件，请将其添加到您的项目中的 Angular 脚本下方:

<!-- angular script -->
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<!-- unique script -->
<script type="text/javascript" src="bower_components/angular-ui-utils/unique.js"></script>

3. 将 unique 作为模块添加到您的应用中:

angular.module('myApp', ['ui.unique'])