AngularJS ng-repeat combined with ng-click=orderByField

AngularJS ng-repeat combined with ng-click=orderByField

本文关键字：orderByField ng-click with ng-repeat combined AngularJS      更新时间：2023-09-26

AngularJS

$scope.orderByField = 'firstName';
$scope.reverseSort = false;
$scope.headers = ['First Name':'firstName','Last Name':'lastName']

查看

<th
    ng-repeat="(key,value) in headers"
    ng-click="orderByField=value; reverseSort = !reverseSort">
    {{ key }}
    <span ng-show="orderByField == value">
        <span ng-show="!reverseSort"> &#9652</span>
        <span ng-show="reverseSort"> &#9662</span>
    </span>
</th>

这是我的代码，我试图从$scope.headers中的键列表中创建所有table标头，并使每个标头都可排序。

由于某些原因，此代码不起作用，我在web控制台中也没有收到任何错误。

嵌套作用域存在问题。阅读中的嵌套作用域问题https://github.com/angular/angular.js/wiki/Understanding-Scopes.

关于如何修复它以创建对象并使用其中的值：

$scope.modelData = {};
$scope.modelData.orderByField = 'firstName';
$scope.modelData.reverseSort = false;
$scope.headers = {'First Name':'firstName','Last Name':'lastName'}

现在，相应地使用：

<th ng-repeat="(key,value) in headers"
    ng-click="modelData.orderByField = value; modelData.reverseSort = !modelData.reverseSort">
    {{ key }}
    <span ng-show="modelData.orderByField == value">
        <span ng-show="!modelData.reverseSort"> &#9652</span>
        <span ng-show="modelData.reverseSort"> &#9662</span>
    </span>
</th>

就像@VVK回答的那样，您的代码中存在问题。不确定您试图定义Array或Object，

对象应该这样定义：{'First Name':'firstName','Last Name':'lastName'}（它们应该以{开始，以}结束，但不以[]结束）；

将HTML代码更改为使用modelData，然后它就会工作：

<tr ng-repeat="item in data | orderBy:modelData.orderByField:modelData.reverseSort">

您的$scope.headers初始化错误。你应该把它定义为

$scope.headers={'First Name':'firstName','Last Name':'lastName'}
相关文章：