AngularJS orderBy反转数组而不是对其进行排序

Question

当我单击“订购按钮”时，表格没有订购，它只是反转所有td。比如，“A”、“C”、“B”变成“B”、“C”、“A”。我真的不知道为什么会这样。

HTML

                        <!-- Top section -->
    <div class="row">
      <div class="col-lg-12"><img src="/img/AngularJS.svg" class="img-responsive"></div>
      <p class="text-center">поиск и сортировка данных</p>
    </div>

                        <!--Input and buttons-->
    <div class="container-fluid" >
        <div class="row-fluid">
            <input class="col-md-12 col-xs-12" type="text" placeholder="Search people by name..." ng-model='data.text' ng-pattern='data.regexp'>

            <div class="buttons">
                <button ng-click='data.sortType = "data.students.name"; sortReverse = !sortReverse'class="btn btn-sort">Sort by name</button>

                <button ng-click='data.sortType = "data.students.age"; sortReverse = !sortReverse' class="btn btn-sort">Sort by age</button>

                <button ng-click='data.reset()' class="btn btn-danger">Reset</button>
            </div>
        </div>


                        <!--Main content-->
        <div class="main-table col-sm-8  col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1">
            <table class="table table-hover">
                <thead>
                  <tr>
                    <th class="text-center">Image</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Phone</th>
                  </tr>
                </thead>

                <tbody ng-repeat='student in data.students | filter:data.text | orderBy : sortType:sortReverse'>

                  <tr ng-click='data.sideBar(student.img, student.name, student.age, student.phone)'>

                    <td><img ng-src='{{student.img}}'></td>
                    <td>{{student.name}}</td>
                    <td>{{student.age}}</td>
                    <td>{{student.phone}}</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>

JS

(function(){
    var app = angular.module('app', []);


    app.controller('DataController', function() {
        this.students = arr;

        this.regexp = /^[A-z]+$/;

        this.sideBarImg = '/img/dog.svg';
        this.sideBarName = 'Chad Snyder';
        this.sideBarAge = 22;
        this.sideBarPhone = '8 (629) 653-9041';

        this.sortType = 'student.age';
        this.sortReverse = false;

        this.reset = function() {
            this.text = '';
        };

        this.sideBar = function(img, name, age, phone){
            this.sideBarImg = img;
            this.sideBarName = name;
            this.sideBarAge = age;
            this.sideBarPhone = phone;

        };


    });

    app.filter('favAnimal', function() {
        return function(animalName) {

            animalName = animalName.substring(0, animalName.indexOf('.'));
            var tmp = animalName.split('/');
            var result = tmp[tmp.length - 1];

            return result;
        }
    })


    arr = [
        {img: '/img/dog.svg', name: 'Chad Snyder', age: 22, phone: '8 (629) 653-9041'},
        {img: '/img/raccoon.svg', name: 'Milton Warner', age: 19, phone: '8 (366) 958-8850'},
        {img: '/img/fox.svg', name: 'Viola Hale', age: 35, phone: '8 (687) 456-4873'},
        {img: '/img/owl.svg', name: 'Tyler Herrera', age: 27, phone: '8 (537) 867-1647'},
        {img: '/img/sheep.svg', name: 'Gabriel Howell', age: 45, phone: '8 (332) 288-8294'},
        {img: '/img/cat.svg', name: 'Adelaide Jacobs', age: 32, phone: '8 (609) 383-7022'},
        {img: '/img/koala.svg', name: 'James Diaz', age: 21, phone: '8 (262) 812-4095'},
        {img: '/img/lion.svg', name: 'Vincent Sparks', age: 21, phone: '8 (475) 497-4172'},
        {img: '/img/owl.svg', name: 'Jackson Peterson', age: 23, phone: '8 (838) 992-3015'},
        {img: '/img/penguin.svg', name: 'Theresa Schwartz', age: 31, phone: '8 (215) 881-3278'},
        {img: '/img/pig.svg', name: 'Charles Carter', age: 39, phone: '8 (719) 862-9379'},
        {img: '/img/dog.svg', name: 'Curtis Briggs', age: 70, phone: '8 (255) 719-5400'},
        {img: '/img/raccoon.svg', name: 'Mollie French', age: 57, phone: '8 (668) 359-4293'},
        {img: '/img/koala.svg', name: 'Maurice Watson', age: 36, phone: '8 (368) 345-7784'},
        {img: '/img/lion.svg', name: 'Derrick Hill', age: 42, phone: '8 (413) 435-6719'}
        ];
}());

Answer 1

您的排序类型必须是属性名称。

      <button ng-click='sortType = "name"; sortReverse = !sortReverse' class="btn btn-sort">Sort by name</button>

      <button ng-click='sortType = "age"; sortReverse = !sortReverse' class="btn btn-sort">Sort by age</button>

看看这个JSFiddle 我必须引入 $scope 才能使应用程序运行。