How can one, if at all possible, do the following:
<ul>
<li ng-reapeat="a in c"></li>
</ul>
with an output like this:
<ul>
<div>
<li></li> <--- from a to b (say first till 3rd element)
<li></li>
...
</div>
<div>
<li></li> <--- from b to c (4th element till end)
<li></li>
...
</div>
</ul>
Or even multiple <ul></ul> blocks. First one closing at a designated index, second one opening and continuing until the end.
What about slicing the array (probably not an "angular way"), for example
<ul>
<div>
<li ng-repeat="a in c.slice(0, 3)"></li>
</div>
<div>
<li ng-repeat="a in c.slice(3)"></li>
</div>
</ul>
General idea, you should be able to get what you want using this pattern
<ul>
<li ng-repeat-start="a in c" ng-show="$index<3"></li>
<li ng-repeat-end ng-show="$index>=3"></li>
</ul>
Try this:
I think you need multiple ul blocks.
<ul>
<div ng-reapeat="a in c">
<li ng-if="$index<3"></li>
</div>
</ul>
<ul>
<div ng-reapeat="a in c">
<li ng-if="$index>2"></li>
</div>
</ul>
Hope it helps...!
Related
Is it possible to include an ordered list inside a ShieldUI accordion? Including one seems to break my accordion; I'm hoping there is some sort of flag or work around to get ordered lists working.
<div class='accordion-container'>
<h2>Delivery Instructions</h2>
<ul id='accordion'>
<li>
<h2>Vehicle Delivery to Media / Client</h2>
<p>Accordion 1</p>
<li>Header
<ol>
<li>One</li>
<li>Two</li>
</ol>
</li>
</li>
<li>
<h2>Delivery to Airport</h2>
<p>Accordion 2</p>
</li>
</ul>
</div>
Try putting it in a DIV, like this:
<div class='accordion-container'>
<h2>Delivery Instructions</h2>
<ul id='accordion'>
<li>
<h2>Vehicle Delivery to Media / Client</h2>
<p>Accordion 1</p>
<li>
<h2>Header</h2>
<div>
<ol>
<li>One</li>
<li>Two</li>
</ol>
</div>
</li>
</li>
<li>
<h2>Delivery to Airport</h2>
<p>Accordion 2</p>
</li>
</ul>
</div>
I only want to catch the first list item with a css selector.
That can i do?
<ul>
<li class="someclass"> </li>
<li id="thisId" class="someclass"> </li>
<li id="thatId" class="someclass"> </li>
<li id="someId" class="someclass"> </li>
<ul>
ul li.someclass:first-child{
}
I have two ng-repeat, now I want to add this into my second ng-repeat,
I have written the code below:
<ul>
<li data-ng-repeat="quotTypeOpt in list1">
<label>{{quotTypeOpt.text}}</label>
<ul>
<li data-ng-repeat="quotTyp in quotTypeOpt.list2">
<div ng-model="quotTyp.value = quotTypeOpt.value"></div>
<input type="text" ng-model="quotTyp.text" />
<label>{{quotTyp.value}}</label>
</li>
</ul>
</li>
</ul>
When I add line by this way ng-model="quotTyp.value = quotTypeOpt.value", then error has been occured but need is asign value from quotTypeOpt.value to quotTyp.value
Error: [ngModel:nonassign] Expression 'quotTyp.value = quotTypeOpt.value' is non-assignable
Plunker
Thanks
You're trying to initialize some variable. The best place to do so is ng-init.
So in your code, it goes like this :
<ul>
<li data-ng-repeat="quotTypeOpt in list1">
<label>{{quotTypeOpt.text}}</label>
<ul>
<li data-ng-repeat="quotTyp in quotTypeOpt.list2">
<div ng-model="quotTyp.value" ng-bind="quotTyp.value = quotTypeOpt.value"></div>
<input type="text" ng-model="quotTyp.text" />
<label>{{quotTyp.value}}</label>
</li>
</ul>
</li>
</ul>
I need to add a class to the last <li> in an <li>group created using Angular's ngRepeat. So the code below
<ul>
<li class="columns small-3" ng-repeat="tag in tags">
{{tag}}
</li>
<ul>
creates something like
<ul>
<li>Art</li>
<li>Science</li>
<li>Beauty</li>
<ul>
What I need is for the class .end to be added to the last <li> so the end result would be
<ul>
<li>Art</li>
<li>Science</li>
<li class="end">Beauty</li>
<ul>
How is this possible?
You should be able to do this using a combination of ng-class and $last.
<ul>
<li class="columns small-3" ng-class="{'end':$last}" ng-repeat="tag in tags">
{{tag}}
</li>
<ul>
Try with ng class with a condition on the index
I am using angularjs to render a hierarchical structure. The test case is at http://jsbin.com/agodoj/1/edit
My question is why ng-repeat stop working at level 3 ? Thanks
Here is my model
function Test($scope) {
$scope.cars = {
chrylser: {
nameplates: [{
name: "np1",
trims: [
"tirm1", "trim2"
]
}]
}
};
}
Here is my template
<div ng-app ng-controller="Test">
<div ng-repeat="(key, value) in cars">
{{key}}
<ul>
<li ng-repeat="np in value.nameplates">{{np.name}}, {{np.trims}}</li>
<ul>
<li ng-repeat="trim in np.trims">
(ng-repeat stop working here) {{trim}}
</li>
</ul>
</ul>
</div>
</div>
Just need to move the closing </li> tag after your inner <ul>. You had the <li ng-repeat="np in value.nameplates"> immediately closing, ending the loop.
<div ng-app ng-controller="Test">
<div ng-repeat="(key, value) in cars">
{{key}}
<ul>
<li ng-repeat="np in value.nameplates">{{np.name}}, {{np.trims}}
<ul>
<li ng-repeat="trim in np.trims">
works! {{trim}}
</li>
</ul>
</li>
</ul>
</div>
</div>