I have the following:
<li ng-repeat="category in categories" ng-if="category.id== '3'">
<div ng-repeat="item in items" ng-if="item.no == category.no" ng-style="{'margin-left': ($first ? '20px': '0px')}">
...
</div>
</li>
it can only work on the very first item, but not every first item in each li. How can I update this?
You need to try it like this. The way you were doing it $first refers to the first ng-repeat.
<li ng-repeat="category in categories" ng-if="category.id== '3'">
<div ng-repeat="item in items" ng-if="item.no == category.no">
// use $parent.$first to check for the first item of categories
// using $first here refers to first item in items array
<div ng-style="{'margin-left': ($first ? '20px': '0px')}">...</div>
</div>
</li>
Related
I have a grid which is selectable. On Clicking -> Select. I want the selected value to be highlighted and displayed as first value in another grid along with the remaining values I used a angular filter but it is displaying only the selected value.
You can use a selected flag on each item, something like this:
<ul>
<li ng-repeat="item in items"
ng-class="{ selected: item.selected }"
ng-click="item.selected = !item.selected">
{{ item.name }}
</li>
</ul>
<ul>
<li ng-repeat="item in items | filter:{selected:true}"
ng-click="item.selected = false">
{{ item.name }}
</li>
</ul>
See this jsfiddle
To show the selected ones first in a grid, you can use the orderBy filter:
<ul>
<li ng-repeat="item in items | orderBy:'-selected'"
ng-click="item.selected = false">
{{ item.name }}
</li>
</ul>
See this jsfiddle
AngularJS
How can i get first element and add class 'active' automatically .
There is 2 ng-repeat , I want get first group --> first item --> first element and add class.
<div class="first" ng-repeat="group in group ">
<div class="second" ng-repeat="item in items">
<div ng-class="{'active': selectedGame.id === prematchGame.id}"></div>
</div>
</div>
You can do like this:
<div ng-class='{active:$first}' > {{item.data}}</div>
If you want to make active only the first element of the first ng-repeat, then try:
<div class="first" ng-repeat="group in groups">
<div class="second" ng-repeat="item in items">
<div ng-class='{active: $first && $parent.$first}'>{{item.data}}</div>
</div>
</div>
Demo on JSFiddle
simple way if all you want is first element
<div class="first" ng-repeat="group in group">
<div class="second" ng-repeat="item in items">
<div ng-class="{'active': $index == 1}" ></div>
</div>
</div>
you can do same for other ng-repeat all will have different $index
Use $first to do check for the first element of ng-repeat : Fiddle
<div class="first" ng-repeat="group in group" ng-init="firstGroup = $first">
<div class="second" ng-repeat="item in items">
<div ng-class="{'active': selectedGame.id === prematchGame.id}" ng-class='{active: $first && firstGroup}'></div>
</div>
</div>
I have two iterations, one list and its wrapper. I want to add a class when I click on the item. But now the class added all wrapper list item. Please see the below link.
$scope.select= function(index) {
$scope.selected = index;
};
https://jsfiddle.net/9me2L1ev/
Please anyone help me. Thanks
Vimal
You need to do something like this you have logical error.
<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
<div ng-repeat="filter1 in filters">
<ul>
<li ng-repeat="filter in filters" ng-click="filter1[selected] = $index " ng-class="{active: $index == filter1[selected]}">
<span class="filters_ct_status"></span>
{{filter.time}}
</li>
</ul>
</div></div>
check out updated fiddle link
You need to combo two $index value. Reference to parent $index using $parent.$index
ng-click="select($parent.$index, $index)" ng-class="{active: $parent.$index + '.' + $index == selected}"
and
$scope.select= function(parentIndex, index) {
$scope.selected = parentIndex + '.' + index;
};
Check this https://jsfiddle.net/56dc8dej/
I have updated code in his link
<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
<div>
<ul>
<li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{active: $index == selected}">
<span class="filters_ct_status"></span>
{{filter.time}}
</li>
</ul>
</div></div>
you need to consider the parent index...
<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
<div ng-repeat="filter1 in filters">
<ul>
<li ng-repeat="filter in filters" ng-click="select($parent.$index, $index)" ng-class="{active: $parent.$index+','+$index == selected }">
<span class="filters_ct_status"></span>
{{filter.time}}
</li>
</ul>
</div>
</div>
And in you controller:
...
$scope.select= function(pindex, index) {
$scope.selected = pindex+','+index;
};
...
I'm building a twitter bootstrap list using angular's ng-repeat:
<ul class="dropdown dropdown-menu">
<li class="menuOption" ng-repeat="option in options">
<a data-ng-click="option.value>0 ? foo() : goo()">
{{option.label}}
</a>
</li>
</ul>
Now, I want to include a divider (<li class="divider"></li>) inside this list. It should be before the last element in the list (which is also indicated by option.value with a negative value, which is probably an easier indication).
My problem is that since the ng-repeat iteration is on the li element itself, I couldn't find a way to use ng-if on this element.
Try ng-repeat-start and ng-repeat-end:
<ul class="dropdown dropdown-menu">
<li class="menuOption" ng-repeat-start="option in options" ng-if="option.value>0">
<a data-ng-click="option.value>0 ? foo() : goo()">
{{option.value}}
</a>
</li>
<li class="divider" ng-repeat-end ng-if="option.value<0">
option < 0 ({{option.value}})
</li>
</ul>
DEMO
<li ng-repeat="Item in Items">
<div ng-switch="($index)==0">
<div ng-switch-when="true">
< Previous
</div>
<div ng-switch-when="false">
{{$index}}
</div>
</div>
</li>
I want to get element count of the Items and want to show "Next >" for last item
Something like this
<li ng-repeat="Item in Items">
<a ng-if="$first" href="#">< Previous</a>
<a ng-if="!$first && !$last" href="#">{{$index}}</a>
<a ng-if="$last" href="#">Next ></a>
</li>
To get the length use Items.length. It becomes more complex if there is a filter. See this SO post