使用ng-repeat在angularJs中不可见排列向上/向下图标 [英] Sorting up/down icons are not visible in angularJs using ng-repeat
问题描述
我可以对表格标题的点击事件排序表格数据。但无法看到相应的上/下图标。我从这里挑这个代码。
< link rel =stylesheethref =// cdnjs.cloudflare.com/ajax/libs/font-awesome /4.2.0/css/font-awesome.css/>
with
< link rel =stylesheethref =http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css/>
即使网址位于font-awesome.css，但对于href，它需要告诉协议（http）从web上找到css文件。
I'm able to sort the table data on click event of table headers. But unable to see the up/down icon accordingly. I picked this code from here.plnkr This is fine when I'm executing this code in plnkr where as the same is not working in my browser. I checked this in both Firefox and chrome. Please let me know where I'm doing wrong. here is the code..
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
Predicate: {{ctrl.predicate}}
<table border="1">
<thead>
<tr>
<th ng-repeat="key in getKeysOfCollection(colors[0])" ng-click="ctrl.predicate = key; ctrl.reverse=!ctrl.reverse;">
{{key}}
<!--<span class="fa fa-sort columnSortIcons" ng-if="ctrl.reverse && key == ctrl.predicate"></span>-->
<span class="fa fa-sort-down columnSortIcons" ng-if="!(ctrl.reverse) && key == ctrl.predicate"></span>
<span class="fa fa-sort-up columnSortIcons" ng-if="ctrl.reverse && key == ctrl.predicate"></span>
</th>
</tr>
<tr>
<th ng-repeat="key in getKeysOfCollection(colors[0])">
<input type="text" ng-model="search[key]" />
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in colors | filter:search | orderBy:ctrl.predicate:ctrl.reverse">
<td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
</tr>
</tbody>
</table>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
this.predicate='id';
this.reverse=false;
$scope.search = {};
$scope.colors = [{
'id': 1,
'productId': 1001,
'productName': 'arun',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-01T06:41:30.809Z'
}, {
'id': 2,
'productId': 1002,
'productName': 'kumar',
'minimumLevel': 23,
'price': 12.54,
'productDate': '2014-11-02T06:41:30.809Z'
}, {
'id': 3,
'productId': 1003,
'productName': 'banu',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-04T06:41:30.809Z'
}, {
'id': 4,
'productId': 1004,
'productName': 'ravi',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-22T06:41:30.809Z'
}, {
'id': 5,
'productId': 1005,
'productName': 'sri',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-18T06:41:30.809Z'
}];
$scope.getKeysOfCollection = function(obj) {
obj = angular.copy(obj);
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
Result: My result is like below.. not showing up/down icons while clicking on headers.
The issue got resolved by changing below line.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
with
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
It is making sense that, even though the url locating font-awesome.css, but for href,it is required to tell protocol(http) to locate the css file from web.
这篇关于使用ng-repeat在angularJs中不可见排列向上/向下图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
