Highlighting a filtered result in AngularJS

In did that for AngularJS v1.2+ HTML: <span ng-bind-html=”highlight(textToSearchThrough, searchText)”></span> JS: $scope.highlight = function(text, search) { if (!search) { return $sce.trustAsHtml(text); } return $sce.trustAsHtml(text.replace(new RegExp(search, ‘gi’), ‘<span class=”highlightedText”>$&</span>’)); }; CSS: .highlightedText { background: yellow; }

AngularJS – How to structure a custom filter with ng-repeat to return items conditionally

Filters don’t work on individual items in the array, they transform the entire array into another array. userApp.filter(‘matchAccessLevel’, function() { return function( items, userAccessLevel) { var filtered = []; angular.forEach(items, function(item) { if(userAccessLevel >= item.minAccess) { filtered.push(item); } }); return filtered; }; }); See this plnkr **always inspect the arguments to a function. It’s not …

Read more

Do bindings nested inside of a lazy one-time ng-repeat binding bind just once?

Scenario 1: <li ng-repeat=”item in ::items”>{{::item.name}}</li> Both expressions will be one-time bound. Adding an item or changing an existing item’s name will not be reflected. Demo: http://plnkr.co/edit/53r8FCmcNK4MmM6Uzxp2?p=preview Scenario 2: <li ng-repeat=”item in ::items”>{{item.name}}</li> First expression will be one-time bound. Adding an item will not be reflected. Changing an existing item’s name will be reflected. Demo: …

Read more

AngularJS: list all form errors

As @c0bra pointed out in the comments the form.$error object is populated, it just doesn’t like being dumped out as JSON. Looping through form.$errors and it’s nested objects will get the desired result however. <ul> <li ng-repeat=”(key, errors) in form.$error track by $index”> <strong>{{ key }}</strong> errors <ul> <li ng-repeat=”e in errors”>{{ e.$name }} has …

Read more

Angular.js ng-repeat filter by property having one of multiple values (OR of values)

Best way to do this is to use a function: <div ng-repeat=”product in products | filter: myFilter”> $scope.myFilter = function (item) { return item === ‘red’ || item === ‘blue’; }; Alternatively, you can use ngHide or ngShow to dynamically show and hide elements based on a certain criteria.

AngularJS sorting rows by table header

I think this working CodePen example that I created will show you exactly how to do what you want. The template: <section ng-app=”app” ng-controller=”MainCtrl”> <span class=”label”>Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br> <table class=”table table-bordered”> <thead> <tr> <th> <a href=”#” ng-click=”orderByField=’firstName’; reverseSort = !reverseSort”> First Name <span ng-show=”orderByField == ‘firstName'”><span ng-show=”!reverseSort”>^</span><span ng-show=”reverseSort”>v</span></span> </a> </th> <th> <a …

Read more