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; }
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 …
This should actually work fine. Person should be available on the tr element as well as on its children since they share the same scope. This seems to work fine for me: <table> <tr ng-repeat=”person in people” ng-class=”rowClass(person)”> <td>{{ person.name }}</td> </tr> </table> http://jsfiddle.net/xEyJZ/
A repeater inside a repeater <div ng-repeat=”step in steps”> <div ng-repeat=”(key, value) in step”> {{key}} : {{value}} </div> </div>
filter by obj expression: <h3>Unregistered Users</h3> <div ng-repeat=”user in users | filter:{registered:false}”> <div class=”row-fluid”> <div class=”span2″> {{user.name}} </div> </div> </div> JSFiddle: http://jsfiddle.net/alfrescian/9ytDN/
$index will refer to the index on the innermost ngRepeat scope, so if that’s what you need, you can just use it. What the docs is describing is a scenario where you need access to $index in the parent ngRepeat. You can get it in a couple of ways: One is to use $parent, and …
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: …
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 …
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.
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 …