带数字字段的Angular Js order不能工作

Angular Js orderBy with numeric field is not working

本文关键字：order 不能 工作 Js Angular 数字 字段      更新时间：2023-09-26

在控制器中，我已经编写了将rank转换为Float的代码

details.rank = '';
$scope.order = function (predicate) {
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
    if (predicate == 'rank') {
        for (var i = 0; i < data.countries[$scope.index].cities.length; i++) {
            details.rank = parseFloat(data.countries[$scope.index].cities[i].rank);
        }
        $scope.predicate = predicate;
    } else $scope.predicate = predicate;
};

但这里我得到错误，ReferenceError: details没有定义

我有这样的json:

{
    "countries": [{
        "country": "India",
        "cities": [{
            "name": "Bangalore",
            "rank": "40"
        }, {
            "name": "Kolkata",
            "rank": "54"
        }, {
            "name": "Mumbai",
            "rank": "32"
        }, {
            "name": "Chennai",
            "rank": "42"
        }]
    }, {
        "country": "China",
        "cities": [{
            "name": "Guangzhou",
            "rank": "111"
        }, {
            "name": "Beijing",
            "rank": "90"
        }, {
            "name": "Fuzhou",
            "rank": "21"
        }, {
            "name": "Baotou",
            "rank": "23"
        }]
    }]
}

在html如果我点击表的标题，那么它将对表进行升序和降序排序，但我无法做到这一点。

<th>
    <a href="" ng-click="order('rank')">RANK</a>
    <span ng-show="predicate === 'rank'" ng-class="{reverse:reverse}">     </span>
</th>
<ul ng-repeat="city in countryType">
    <li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
        <div class="text" id="t1"> {{details.name}} </div>
        <div class="text" id="t2"> {{details.rank}}</div>
        <div class="text" id="t3"> {{details.population}} </div>
        <div class="text" id="t4"> {{details.language}}</div>
    </li>
</ul>

您可以通过点击标题div来进行动态排序，如下所示:

<ul ng-repeat="city in countryType">
    <li>
        <div class="text" ng-click="orderListBy('name')"> Name </div>
        <div class="text" ng-click="orderListBy('rank')"> Rank</div>
        <div class="text" ng-click="orderListBy('population')"> Population </div>
        <div class="text" ng-click="orderListBy('language')"> Language</div>
    </li>
    <li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
        <div class="text" id="t1-{{$index}}"> {{details.name}} </div>
        <div class="text" id="t2-{{$index}}"> {{details.rank}}</div>
        <div class="text" id="t3-{{$index}}"> {{details.population}} </div>
        <div class="text" id="t4-{{$index}}"> {{details.language}}</div>
    </li>
</ul>

在控制器

//initialize values
$scope.predicate = 'rank';
$scope.reverse = false;
$scope.orderListBy = function(attr){
    $scope.predicate = attr;
    $scope.reverse = !$scope.reverse;
};

这样做会在重新单击列的标题时恢复排序。

PS:不要忘记在ng-repeat指令中动态命名你的id，以避免错误，并有一个有效的HTML代码

相关文章：