I have the following ng-repeat list. I want to convert it to checkboxes.
Currently, it is repeating the category headings in myJSON.mylist and then repeating each subitem in each category in list mode.
How can I convert the list type into checkbox type, so that ONLY subitems can be chosen?
<ul ng-repeat="s in myJSON.mylist">
<li type="checkbox"> {{s.item}}</li>
<ul >
<li type="checkbox" ng-repeat="subitem in s.subitems">
{{subitem.values}}</li>
</ul>
</ul>
here is a similar example.
you can go like this:
<div ng-repeat="sin myJSON.mylist">
<div > {{s.item}}</div>
<ul >
<li ng-repeat="subitem in s.subitems">
<input type="checkbox" name="myname"
ng-model="myModel.myname[subitem.values]">
{{subitem.values}}
</li>
</ul>
</div>
The difference is this:
You are using
<li type="checkbox"...
The example uses
<input type="checkbox" ...
Probably what you want is
<li><input type="checkbox" ...
Related
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 have an ng-reapeat loop which shows a list of flights. I want to set an .active class for the flight date originally searched for. This .active class would need to go on the <li> element but I can't put it on every <li> element.
Anyone got any ideas?
Here's my html code so far:
<div data-ng-if="cheapestFlights.length>0" class="u-filter-container">
<ul class="u-filters-list">
<li data-ng-repeat="flight in cheapestFlights" class="u-filters-list-item">
<span data-ng-click="$parent.selectedCheapestFlight = flight" data-ng-class="{selected:$parent.selectedCheapestFlight==flight}">
<span class="u-filters-list-text u-dates" data-ng-bind="flight.DepartureDateString" ng-click="filterLowestFlight(flight.DepartureDateString)" ng-model="flight.DepartureDateString" ng-init="filterLowestFlight()"></span>
<span class="u-filters-list-text u-prices">{{flight.Price | currency : "£"}}</span>
</span>
</li>
</ul>
</div>
Thank you in advance.
You should use data-ng-class="{'active': searchDate == flight.date }"
Add ng-model to the input where the date is being searched and add ng-class on your "li" element when those values are equal:
<div class="flightDate">
<input ng-model="flightDate" type="text">
</div>
<div data-ng-if="cheapestFlights.length>0" class="u-filter-container" ng-class="{'active': flight.DepartureDateString == flightDate}">
<ul class="u-filters-list">
<li data-ng-repeat="flight in cheapestFlights" class="u-filters-list-item">
<span data-ng-click="$parent.selectedCheapestFlight = flight" data-ng-class="{selected:$parent.selectedCheapestFlight==flight}">
<span class="u-filters-list-text u-dates" data-ng-bind="flight.DepartureDateString" ng-click="filterLowestFlight(flight.DepartureDateString)" ng-model="flight.DepartureDateString" ng-init="filterLowestFlight()"></span>
<span class="u-filters-list-text u-prices">{{flight.Price | currency : "£"}}</span>
</span>
</li>
</ul>
</div>
i have a div implementing infinite-scroll which is placed in a partial HTML page.this div has a implementation within it this ul is implementing ng-repeat for the items got through infinite-scrolln function implemented in a factory.this function is working fine on each scroll.but my is not getting rendered
here is that html
<div ng-controller="studentCareerList">
<div infinite-scroll="list.nextPage(list.index,limit,'engineer')" infinite-scroll-disabled='list.stopscript' >
<ul class="selectMajor relatedCareer " ng-repeat="item in myData" >
<li class="check">
<input type="checkbox" id="check5" class="css-checkbox" /><label class="css-label" for="check5"></label></li>
<li class="icon"><span class="icon30 greenSetting" ></span></li>
<li class="name">
<p>{{item.Name}}</p>
</li>
<li class="description">{{item.Description}}</li>
<li class="remaining">{{item.EarningsAnnual}}</li>
<li class="like"><span class="greyLike"></span></li>
</ul>
<div class="message" style="text-align: center;" ng-show="list.noRecordTrigger">
<span class="infoIcon"></span>
<span>No record found.</span>
</div>
</div>
<div><span ng-show="list.busy">Loading please wait...</span></div>
</div>
Im using a simple ng-repeat to generate a list of countries. Within each list is a hidden row/div that can be expanded and collapsed.
The issue that i am facing, is that before i introduced Angular into my application, i manually hard-coded the element's ID, for example:
<li data-show="#country1">
{{country.name}} has population of {{country.population}}
<div id="country1">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country2">
{{country.name}} has population of {{country.population}}
<div id="country2">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country3">
{{country.name}} has population of {{country.population}}
<div id="country3">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country4">
{{country.name}} has population of {{country.population}}
<div id="country4">
<p>Expand/collapse content
</div>
</li>
New code using ng-repeat:
<li ng-repeat="country in countries" data-show="????">
{{country.name}} has population of {{country.population}}
<div id="???">
<p>Expand/collapse content
</div>
</li>
How can i assign a dynamic/incremental id in my ng-repeat?
You can use $index https://docs.angularjs.org/api/ng/directive/ngRepeat
<li ng-repeat="country in countries" data-show="????">
{{country.name}} has population of {{country.population}}
<div id="country-{{$index}}">
<p>Expand/collapse content
</div>
</li>
You may need something like below when you got a nested ng-repeat:
<label id="country-{{$parent.$index}}-{{$index}}" ng-repeat="city in country.cites">
{{city.name}}
</label>
{{$index+1}} will show 1-5 for every page of pagination in order to change serial no as per page no of pagination, use {{$index+curPage*5+1}}, where curPage is your current page in pagination.
<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