angularjs ng-style: background-image isn’t working

It is possible to parse dynamic values in a couple of way. Interpolation with double-curly braces: ng-style=”{‘background-image’:’url({{myBackgroundUrl}})’}” String concatenation: ng-style=”{‘background-image’: ‘url(‘ + myBackgroundUrl + ‘)’}” ES6 template literals: ng-style=”{‘background-image’: `url(${myBackgroundUrl})`}”

Angular JS filter not equals

The syntax is just a little off, try: <li class=”list-group-item” ng-repeat=”question in newSection.Questions | filter:{ Id: ‘!-1’}” ng-mouseenter=”hover = true” ng-mouseleave=”hover = false”> <div href=”#” editable-text=”question.Text”>{{question.Text}}</div> </li> See a little JSFiddle: http://jsfiddle.net/U3pVM/3845/ Edit: Example with variables: <script> var invalidId = ‘-1’; </script> <li class=”list-group-item” ng-repeat=”question in newSection.Questions | filter:{ Id: ‘!’ + invalidId}” ng-mouseenter=”hover = …

Read more

angular ng-repeat skip an item if it matches expression

As @Maxim Shoustin suggested, the best way to achieve what you want would be to use a custom filter. But there are other ways, one of them being to use the ng-if directive on the same element were you put the ng-repeat directive (also, here’s the plunker): <ul> <li ng-repeat=”player in players” ng-if=”player.name_key!=’FirstPerson'”></li> </ul> This …

Read more

Directive isolate scope with ng-repeat scope in AngularJS

Okay, through a lot of the comments above, I have discovered the confusion. First, a couple of points of clarification: ngRepeat does not affect your chosen isolate scope the parameters passed into ngRepeat for use on your directive’s attributes do use a prototypically-inherited scope the reason your directive doesn’t work has nothing to do with …

Read more

Show hidden div on ng-click within ng-repeat

Remove the display:none, and use ng-show instead: <ul class=”procedures”> <li ng-repeat=”procedure in procedures | filter:query | orderBy:orderProp”> <h4><a href=”#” ng-click=”showDetails = ! showDetails”>{{procedure.definition}}</a></h4> <div class=”procedure-details” ng-show=”showDetails”> <p>Number of patient discharges: {{procedure.discharges}}</p> <p>Average amount covered by Medicare: {{procedure.covered}}</p> <p>Average total payments: {{procedure.payments}}</p> </div> </li> </ul> Here’s the fiddle: http://jsfiddle.net/asmKj/ You can also use ng-class to toggle …

Read more

AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

Whenever you do some form of operation outside of AngularJS, such as doing an Ajax call with jQuery, or binding an event to an element like you have here you need to let AngularJS know to update itself. Here is the code change you need to do: app.directive(“remove”, function () { return function (scope, element, …

Read more

Understanding the ngRepeat ‘track by’ expression

You can track by $index if your data source has duplicate identifiers e.g.: $scope.dataSource: [{id:1,name:’one’}, {id:1,name:’one too’}, {id:2,name:’two’}] You can’t iterate this collection while using ‘id’ as identifier (duplicate id:1). WON’T WORK: <element ng-repeat=”item.id as item.name for item in dataSource”> // something with item … </element> but you can, if using track by $index: <element …

Read more