Hey I'm looping thru an array using ng-repeat in my template. The list spits out 9 list elements and I would like change the background color of the selected list element but I want to do it in a way where multiple ones can be selected and the color of the selected ones with a different background color. Initially I had passed $event to the click function on the list element and added a class to event.target but that put the class on all the list elements rather than the selected one.
<ul>
<li class="info-items"
ng-repeat="card in config.cards"
ng-class="{'error-border': emptyCardsArray}">
<div class="inner-text"
ng-model="userSelection.cards"
ng-click="addCard(card.name, $event)">{{card.name}}{{$index + 1}}</div>
</li>
</ul>
HTML:
$(event.target).addClass('active.cards');
JS:
The list that I'm repeating thru unforunately doesn't have a unique ID or I would have passed in the ID and created a condition to check whether the selected items have one and applied the class.
It's a much better practice to simply use ng-class for this.
<ul>
<li class="info-items"
ng-repeat="card in config.cards"
ng-class="{'error-border': emptyCardsArray}">
<div class="inner-text"
ng-model="userSelection.cards"
ng-class="active.cards">{{card.name}}{{$index + 1}}
</div>
</li>
</ul>
Related
I don't understand how ng-if works:
I would like that a button in a list is visible only
if a condition is verified.
In the example below, a button should only be visible
if a list element has title == 'Title2'
<ul>
<li ng-repeat="o in options">{{o.title}}
<button ng-if="o.title=='Title2'">BTN</button>
</li>
</ul>
But as you can see from the
code here all array elements show up
I have a code that I generate using Python's Mako templates:
<ul class="list-group">
% for t in list:
<li class="list-group-item">
<div
ng-class="hover ? 'btn btn-xs btn-default' : ''"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false"> ${list.data} </div>
</li>
% endfor
</ul>
All I want is that the row I'm hovering of - will be converted to a button.
Problem is that I see a list of rows ,but when the mouse hover on one of the elements - all elements are affected instead of the specific <li> element I was hovering of , like all the text inside all the rows are converted to buttons.... any idea what am I missing ?
Your hover variable is being assigned in the global scope. Using ng-repeat fixes this because each template instance gets its own scope.
To fix this without ng-repeat you can namespace the hover property within the list object, like in this Plunker.
I am using ui-sortable directive (from angular-ui ) in the view
<ul ui-sortable>
<li ng-repeat="item in items" >
{{item.property1}}
{{item.property2}}
</li>
</ul>
As a result the user can drag and drop to re-sort the items in the browser but this does not update the order of the $scope.items array. How can this be accomplished so that $scope.items array order stays in sync with user initiated drag and drop change in the browser?
You are Missing
ng:model
<ul ui:sortable ng:model="list">
<li ng:repeat="item in list" class="item">{{item}}</li>
</ul>
Please check below working example
Demo
It display the updated array
<div ng:repeat="item in list">{{item}}</div>
Array is updated automatically by the directive
Given a list such as
var list = ['one','two','three'];
In angular, I want to iterate through the list only rendering certain items. Something like:
<ul ng-controller="main">
<li ng-repeat="item in list" ng-switch on="item">
<span ng-switch-when="one">{{item}}</span>
</li>
</ul>
And have the output look like this:
<ul>
<li><span>one</span></li>
</ul>
Instead, I get:
<ul>
<li><span>one</span></li>
<li></li>
<li></li>
</ul>
I have tried ng-hide but is woefully inefficient since I have a large number of items and only want to display one or two and ng-hide renders all of them and then hides the inactive ones with css. This is a problem because I am doing this in a JQuery Mobile app which tries to decorate all list items, including the hidden ones, killing performance.
JSFiddle at http://jsfiddle.net/ghendricks/MXu3a/
You are correct that ng-hide should not be used here, it is a job for filters.
You can provide a custom function to filter the list: http://jsfiddle.net/ERMVj/
$scope.selectOne = function (input) { return input == "two" || input == "one"; };
<li ng-repeat="l in list | filter:selectOne">
<span>{{l}}</span>
</li>
i repeat things in ng repeat like so
<div class="" ng-repeat="deutscheBankEvent in deutscheBankEvents">
<div class="schrottler-opened schrottler" title="">
<span class="presse_ueber" style="font-size:22px;margin-left:10px;font-weight: normal;margin-top:5px">{{deutscheBankEvent.name}}</span>
</div>
<!-- data-ng-repeat also possible-->
<div class="">
<div class="presse_content">
<Div style="color:white">{{deutscheBankEvent.name}}</div>
<ul class="liste_k">
<li ng-repeat="list in deutscheBankEvent.list">
{{list}}
</li>
</ul>
</div>
</div>
later down the code comes up a form to register to events. the form is hidden until user selects a place and date via select. this is triggered like so:
<span ng-show="myForm.locationDate.$valid">
my issue now is: this shows up all hidden form elements when one select is valid.
how can i set the scope to only this one changed?
Since ng-repeat creates a new scope, changing ng-show/ng-hide conditions to scope bound properties will work perfectly (example).