Javascript AngularJS ng repeat结合ng click=orderByField
AngularJSJavascript AngularJS ng repeat结合ng click=orderByField,javascript,angularjs,Javascript,Angularjs,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
$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"> ▴</span>
<span ng-show="reverseSort"> ▾</span>
</span>
</th>
{{key}}
▴
▾
这是我的代码,我试图从$scope.headers中的键列表中创建所有表标题,并对每个标题进行排序
由于某些原因,这段代码不起作用,我在web控制台中也没有收到任何错误。嵌套作用域存在问题。请阅读中的嵌套范围问题
关于如何修复它以创建对象并从中使用值:
$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"> ▴</span>
<span ng-show="modelData.reverseSort"> ▾</span>
</span>
</th>
您的$scope.headers
初始化错误。你应该把它定义为
$scope.headers={'First Name':'firstName','Last Name':'lastName'}
请将其放入plunker:我使用了您的代码,但字段仍然没有排序,这是plunker抱歉我没有保存它,现在检查链接,每列中的字段没有排序。这不是建设性的@Koten。你的问题不清楚。你想要实现什么?什么未排序?在表头单击列中的字段应按$scope.headers
值排序。那么,列中的数据在哪里?我在你身上什么也没看到。您的plunkr仍有错误,无法正常工作。请使用正在运行的数据正确更新您的plunkr,以便我们提供帮助。
$scope.headers={'First Name':'firstName','Last Name':'lastName'}