Question

我正在使用AngularJS＆amp ;;制作多页表格。 UI路由器。第一页为用户提供选项按钮，以选择他们想要通过电影列表（标题，流派或评级）过滤的方式。

我使用switch语句来过滤第二页上显示的内容。如果＆＃34;标题＆＃34;单击按钮，然后仅显示标题。如果用户点击＆＃34;流派＆＃34;然后他们会看到可用的类型等。

在大多数情况下，我的switch语句正在运行，但是当我尝试显示可用的类型或评级时遇到错误，因为我不想重复。我尝试使用Angular＆＃39; 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 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. 将独特的模块添加到您的应用中：

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

如何使用ng-repeat返回不同的值（无重复）

1 个答案: