3410

Sorting up/down icons are not visible in angularJs using ng-repeat

Question:

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.<a href="http://plnkr.co/edit/xcgUMOxFDkPz6fQ0YAvD?p=preview" rel="nofollow">plnkr</a> 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..

<strong>HTML</strong>

<!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>

<strong>JS</strong>

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. <a href="https://i.stack.imgur.com/1OWUn.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/1OWUn.png" data-original="https://i.stack.imgur.com/1OWUn.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Answer1:

I recommend that you use ng-show instead ng-if

<pre class="snippet-code-html lang-html prettyprint-override"> <span class="fa fa-sort-down columnSortIcons" ng-show="!(ctrl.reverse) && key == ctrl.predicate"></span> <span class="fa fa-sort-up columnSortIcons" ng-show="ctrl.reverse && key == ctrl.predicate"></span>

Answer2:

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.

Recommend

  • 'ui-sref' of Angular UI-Router not working as expected
  • SSL offloading on AWS Cloudfront level
  • Nesting angularjs directives recursively
  • grunt-ngdocs: styles file not included to demo code
  • Loop over JSON data to create d3 pie charts
  • Tilemap Collisions don't work in Phaser
  • Backbone not defined with require js
  • Reactjs require not defined
  • Batching in py2neo
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • Apply a gradle plugin with a common configuration to all projects
  • how to add semantic ui in a rails app?
  • SCons libraries and sub-libraries
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • NetBeans doesn't see style.css [duplicate]
  • How do I obtain a list of files that changed from svn over a date range?
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to add regEx in angular filter
  • integrate POCO library in android ndk
  • PHP get selected value of select form
  • Google OAuth: can't get refresh token with authorization code
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • Adjust width of select element according to selected option's width
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Jquery UI tool tip close icon
  • Django rest serializer Breaks when data exists
  • Highlight and Bold text in JTextPane
  • Xamarin Forms - UWP Fonts
  • Modifying destination and filename of gulp-svg-sprite
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery