AngularJS OrderBy无法在角度1.5

时间:2017-01-03 17:05:18

标签: javascript angularjs angularjs-directive

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
    <script>
    angular.module('sortApp', [])

    .controller('mainController', function($scope) {
        $scope.sortType = 'name'; // set the default sort type
        $scope.sortReverse = false; // set the default sort order
        $scope.searchFish = ''; // set the default search/filter term

        // create the list of sushi rolls 
        $scope.sushi = [{
            name: 'Cali Roll',
            fish: 'Crab',
            tastiness: 2
        }, {
            name: 'Philly',
            fish: 'Tuna',
            tastiness: 2
        }, {
            name: 'Tiger',
            fish: 'Eel',
            tastiness: 2
        }, {
            name: 'Rainbow',
            fish: 'Variety',
            tastiness: 2
        }];

    });
    </script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>

<body>
    <div class="container" ng-app="sortApp" ng-controller="mainController">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td>
                        <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
            Sushi Roll 
            <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
          </a>
                    </td>
                    <td>
                        <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
          Fish Type 
            <span ng-show="sortType == 'fish' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'fish' && sortReverse" class="fa fa-caret-up"></span>
          </a>
                    </td>
                    <td>
                        <a href="#" ng-click="sortType = 'tastiness'; sortReverse = !sortReverse">
          Taste Level 
            <span ng-show="sortType == 'tastiness' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'tastiness' && sortReverse" class="fa fa-caret-up"></span>
          </a>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse">
                    <td>{{ roll.name }}</td>
                    <td>{{ roll.fish }}</td>
                    <td>{{ roll.tastiness }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

我正在使用此处示例https://scotch.io/tutorials/sort-and-filter-a-table-using-angular中显示的表格排序器,但我最近遇到了一个问题,我现在使用的是角度1.5,对于版本&gt; = 1.5,ordrBy表现得很奇怪,对于Ex:如果列中的所有值都相同,那么它仍会更改row。如果我将角度版本更改为任何版本&lt; 1.5,您可以看到第三列没有排序或更改行顺序,因为列条目是相同的。使用angular 1.5

时我想要相同的效果

0 个答案:

没有答案