Question

在控制器中，我编写了将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：详细信息未定义

我有这样的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>

Answer 1

您可以通过点击标题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代码。

角度Js orderBy与数字字段不起作用

1 个答案: