Question

我完全不明白，为什么我的排序代码不起作用。我想要添加一个排序方法＆＃34; sortFlag＆＃34;到我的应用程序，它并没有以正确的方式工作。

这是代码：

<!DOCTYPE html>
<html lang="ru" ng-app="App2">
<head>
    <meta charset="UTF-8">
    <title>angular example 2</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">



<script
        src="https://code.jquery.com/jquery-1.12.4.js"
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>


<div ng-init>

    <form>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-search"></i></div>

                <input type="text" class="form-control" placeholder="Search" ng-model="searchFish">

            </div>
        </div>
    </form>

<div ng-controller="MainController">
    <span>выберите данные:</span>
    <span>данные1</span>
    <input
        name="content"
        type="radio"
        ng-model="content"
        ng-init="content='first'"
        value="first"
    />
    <span>данные2</span>
    <input
        name="content"
        type="radio"
        ng-model="content"
        value="second"
    />


<table ng-show="content == 'first'">
    <tr>
        <th ng-repeat="(key, value) in datas_1.schema">
            <button href="#"
                    ng-click="sortTable('{{key}}')">
                    <!--ng-show="predicate === '{{key}}'"-->
                    <!--ng-class="{reverse:reverse}"-->

                {{value}}
            </button>
        </th>

        <!--<th>-->
        <!--<button href="#"-->
        <!--ng-click="order('{{key}}')"-->
        <!--ng-show="predicate === '{{key}}'"-->
        <!--ng-class="{reverse:reverse}">{{datas_1.schema.id}}</button>-->
        <!--</th>-->
    </tr>
    <tr ng-repeat="data in datas_1.data | orderBy: sortFlag">
        <td>{{data.id}}</td>
        <td>{{data.name}}</td>
        <td>{{data.price}}</td>
        <td>{{data.quantity}}</td>
    </tr>
</table>

<table ng-show="content == 'second'">
    <tr>
        <th ng-repeat="(key, value) in datas_2.schema">
            <button href="#" ng-click="order('{{key}}')">{{value}}</button>
        </th>
    </tr>
    <tr ng-repeat="data in datas_2.data | orderBy: sortFlag">
        <td>{{data.id}}</td>
        <td>{{data.name}}</td>
        <td>{{data.price}}</td>
        <td>{{data.quantity}}</td>
    </tr>
</table>


    </div>
</div>
</body>
</html>

{{1}}

如果您有任何想法，请帮我解决这个问题。

Answer 1

我不确定orderBy是否可以使用范围变量来使用排序字段。你应该使用一个函数。

控制器：

$scope.dynamicOrderFunction = function() {
    return '-' + $scope.sortFlag;
}

您可以使用加号更改 - 符号，具体取决于您的排序方向。

模板：

<tr ng-repeat="data in datas_2.data | orderBy: dynamicOrderFunction">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td>
    <td>{{data.price}}</td>
    <td>{{data.quantity}}</td>
</tr>

Answer 2

你应该在你的订单中添加另一个“反向”参数 - 重复这样的事情：

<tr ng-repeat="data in datas_2.data | orderBy:sortFlag:reverse">

对于控制器中的函数，将布尔值设置为该反向参数。

$scope.sortFlag = 'id';
$scopr.reverse = false;
$scope.sortTable = function(flag){
    $scope.reverse = ($scope.sortFlag === flag) ? 
     !$scope.reverse : false;
    $scope.sortFlag = flag;
}

这应该可以解决您的问题。如果它不适合你，请告诉我。

angularJs排序代码不起作用

2 个答案: