I have the following:
<li ng-repeat"item in items" ng-if="item.type && item.type=='image'">
<span ng-class="{'selected':$first}">{{item.title}}</span>
</li>
What I'm trying to do is display all item Titles only if it's of type image, and have the first item have the class selected.
The issue comes with the ng-if. If the first item is not of type image, then the actual first item shown does not have the selected class.
How do I update this?
You could create a new list that only has images. Then ng-repeat over that:
$scope.onlyImages = $scope.items.filter(function(item) {
return item.type && item.type === 'image';
});
<li ng-repeat"item in onlyImages">
<span ng-class="{'selected':$first}">{{item.title}}</span>
</li>
You could also do this in the template with a filter, but it would be more expensive since it runs on each digest cycle.
Related
I have an ng-repeat being created like so:
<div class="items">
<!-- WANT TO HIDE THIS ENTIRE AREA IF THERE IS NO VALID ITEMS -->
<b>Items</b>
<span ng-repeat="item in items | orderBy:'priority'" itemid="{{item.$id}}" ng-if="!item.groupID || item.groupID == 'misc'">
{{item.title}}
</span>
</div>
As you can see I have an ng-if which checks if the item has a null item.groupid or is in the misc category.
Many times there is no items that match all of these criteria and in that case I want to hide the outer div <div class="items">
I can't figure out how to hide it because I can't do an ng-show on the inner elements part of the loop.
You can use a filter, and assign the result of the filter to a variable. Use that variable to decide if the enclosing div should be shown or not.
Here's a plunkr showing how it works:
<div ng-show="filteredItems.length > 0">
Test
<div ng-repeat="item in items | filter:hasGroupFilter(group) as filteredItems">
{{ item.name }} - {{ item.group }}
</div>
</div>
And in the controller:
$scope.hasGroupFilter = function(group) {
return function(item) {
return !item.group || item.group === group;
};
};
I think the cleanest way to do that is to pre filter the list, and add a condition on your parent div.items instead of using ng-if in each one of the span in the ng-repeat.
Here is a working plunker
You should filter the list in your controller and just add the condition on the parent div
<div class="items" ng-if="filteredItems.length">
<b>Items</b>
<span ng-repeat="item in filteredItems | orderBy:'priority'" itemid="{{item.$id}}">
{{item.title}}
</span>
</div>
You could potentially create a function that has access to a public variable on the outer scope. It would look something along the lines of this:
Inside your JS file
$scope.NoValidItems = true; //assume no valid items code also might look different based on how you format your angular
$scope.CheckItems = function(item){
var check = false;
if(item.groupID && item.groupID !== 'misc'){
check = true;
$scope.NoValidItems = false;
}else
check = false;
return check;
};
HTML
<div class="items" ng-if="!NoValidItems ">
<!-- WANT TO HIDE THIS ENTIRE AREA IF THERE IS NO VALID ITEMS -->
<b>Items</b>
<span ng-repeat="item in items | orderBy:'priority'" itemid="{{item.$id}}" ng-if="!CheckItems(item)">
{{item.title}}
</span>
</div>
This should work, and the if statement might not be exact, but you get the drift. Pretty much if there is one that is valid it will show, but if there is not a valid item do not show. Valid being meeting your conditional criteria. Hopefully this helps, and I explained it alright
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'm a noob to AngularJS. As a learning exercise I am creating a typeahead control.
The typeahead is comprised of a text box for filtering the options, an unordered list for displaying the menu of short-listed options, and a Show/Hide button for manually toggling the list.
The text box filters the li elements using ng-repeat. When selecting an li item from the list, I populate the text box with the selected value, and then hide the list.
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="hideMenu(); query.id = item.id">
{{item.id}}
</li>
</ul>
</div>
My issue is that when the value is assigned to the text box, the list is momentarily filtered to the one option selected (because the text box is also the source of the ng-repeat filter), before hiding the menu. What I want id for the menu to be hidden without being refreshed with the filter first.
It should be noted that this only occurs when using CSS transitions which I am using to fade the menu out.
Here is a plnkr to illustrate.
Here's a working Plnkr. I basically gave your menu time to finish its animation before setting the value. Relevant code is as follows:
$scope.selectItem = function(id){
$scope.isActive = false;
$timeout(function(){
$scope.query.id = id;
}, 250);
}
...and the HTML using the newly created selectItem method:
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="selectItem(item.id)">
{{item.id}}
</li>
</ul>
</div>
I have a set of <li> elements.
<ul>
<li ng-class="{current: selected == 100}">
<a href ng:click="selected=100">ABC</a>
</li>
<li ng-class="{current: selected == 101}">
<a href ng:click="selected=101">DEF</a>
</li>
<li ng-class="{current: selected == $index }"
ng-repeat="x in [4,5,6,7]">
<a href ng:click="selected=$index">A{{$index}}</a>
</li>
</ul>
When a user clicks on one of the address elements above then then it should, set the value of selected and show one of the <DIV> elements below:
<div ng:show="selected == 100">100</div>
<div ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>
This works for the first two cases.
When the user clicks ABC then the first <DIV> shows 100 and changes color to red.
When DEF is clicked then 101 shows and DEF changes to red.
However it does not work at all for A0, A1, A2 and A3
When a user clicks A0, A1, A2 or A3 then the correct does not show, the selected value is not set and the color of ALL the ng-repeat A0,A1,A2 and A3 turn to red.
This is best shown if you look at this Plunker:
http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview
Note that at the top I have added {{ selected }} as a debug aid at the top. Also the x in [4,5,6,7] are just meant to simulate a loop. In real life I have this as ng-repeat="answer in modal.data.answers".
Does anyone know how I can set this up so that the li class current is set at the right time and the DIV shows at the right time for the A0, A1, A2 and A3 <li> and <DIV>
The issue here is that ng-repeat creates its own scope, so when you do selected=$index it creates a new a selected property in that scope rather than altering the existing one. To fix this you have two options:
Change the selected property to a non-primitive (ie object or array, which makes javascript look up the prototype chain) then set a value on that:
$scope.selected = {value: 0};
<a ng-click="selected.value = $index">A{{$index}}</a>
See plunker
or
Use the $parent variable to access the correct property. Though less recommended as it increases coupling between scopes
<a ng-click="$parent.selected = $index">A{{$index}}</a>
See plunker
As johnnyynnoj mentioned ng-repeat creates a new scope. I would in fact use a function to set the value. See plunker
JS:
$scope.setSelected = function(selected) {
$scope.selected = selected;
}
HTML:
{{ selected }}
<ul>
<li ng-class="{current: selected == 100}">
<a href ng:click="setSelected(100)">ABC</a>
</li>
<li ng-class="{current: selected == 101}">
<a href ng:click="setSelected(101)">DEF</a>
</li>
<li ng-class="{current: selected == $index }"
ng-repeat="x in [4,5,6,7]">
<a href ng:click="setSelected($index)">A{{$index}}</a>
</li>
</ul>
<div
ng:show="selected == 100">
100
</div>
<div
ng:show="selected == 101">
101
</div>
<div ng-repeat="x in [4,5,6,7]"
ng:show="selected == $index">
{{ $index }}
</div>
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>