I have ng-repeat in my html. how I can add ng-repeat with dynamically changes name.
<div ng-repeat="category in categories"> //external repeat
<div ng-repeat="data in categoryData.{{categoryName here}}">
// want add instead .{{categoryName here}} defined (concrete) name from external loop.
In result I want have many places in html and different data for each place that will be places in categoryData.NameOfCategory .NameOfCategory will replaced to concrete name.
You can try this,
<div ng-repeat="category in categories">
<div ng-repeat="data in categoryData[category.name]">
<div ng-repeat="data in categoryData.['categoryName']">
Related
I have an object called "profile" that includes a handful of other objects -- each one I want to display the label followed by the display_value:
In my HTML, I know I need to ng-repeat through the object profile, but have not been able to get the desired display of label: display_value (i.e. Employment Start Date: 11/20/2019). What is the correct syntax to loop through c.profile and display label followed by display_value? Do I need two ng-repeats in this instance?
<div ng-repeat="item in c.profile track by $index">
{{item.?}}: {{item.?}}
</div>
<div ng-repeat="item in c.profile track by $index">
{{item.label}}: {{item.display_value}}
</div>
make sure your data is what you expect it to be.
Use ng-repeat="(key, value) in myObj":
<div ng-repeat="(category, valueObj) in c.profile">
<h2>{{category}}</h2>
<div ng-repeat="(key, value) in valueObj">
{{key}} : {{value}}
</div>
</div>
For more information, see
AngularJS ng-repeat Directive API Reference - Iterating over object properties
I need to make use of the ng-repeats in the dirPagination(angular plugin), I have also created the plunker.
I need the current object to have ng-repeat at two different places
1 rating images
2 services offered
Link for plunker
If you refer to the plnkr, there is a ratingImages attribute in each object, what i want is that i need to make use of ng-repeat in side the dir-paginate for example html :
<div class="rating">
<img ng-repeat="ratingImage in provider.ratingImages" src="{{ratingImage }}" alt="" />
<span>(5 reviews)</span>
</div>
But by doing this i receive an error ng-repeat:dupes
Here is how you can do it
<div class="rating">
<!-- ng-repeat = ratingImage in provider.ratingImages -->
<img ng-repeat="ratingImage in provider.ratingImages track by $index" src="{{ratingImage}}" alt="" />
<span>(5 reviews)</span>
</div>
note i use track by $index for dupes
read more about it here
How to append expression variable on ng-repeat in Angularjs
My code:
<div class="col-md-9" ng-controller="AddOrderController">
<div class="owl-demo" class="owl-carousel" ng-repeat="t in [1,2]">
<div class="item" ng-repeat="d in datas.item{{t}}" >
<imagedata value="d"></imagedata>
</div>
</div>
</div>
Error this line: ng-repeat="d in datas.item{{t}}"
i have data.items1, data.item2 json data
how to declare datas.item{{t}} ?
you can't use an expression in this case, but you don't need to because the t variable is already available to you. just use ng-repeat="d in datas['item' + t]"
If this ng-repeat is throwing Duplicate Key in Repeater, you may have to modify it slightly to be ng-repeat="d in datas['item' + t] track by $index"
How about ng-repeat="d in datas['item'+t]"?
I am using metro ui and am trying to use ng-repeat within it to build html within a popup.
My template looks like this. Any thoughts would help. I have verified the data is there, but ng-repeat just doesn't work within double quotes. I've tried using single quotes, but that doesn't work.
Here's my template.
<div class="container">
<div class="title-group six">
<a ng-repeat="product in products"
data-hint="{{product.name}}|<div><ul><li ng-repeat='color in product.colors'>{{color.name}}</li> </ul></div>" href="#/product/{{product.id}}" class="tile bg-violet" data-click="transform" >
<div class="tile-content icon">
<img src="{{product.pic}}">
</div>
<div class="brand">
<div class="label">{{product.name}} </div>
</div>
</a>
</div>
As a start, your HTML is malformed, you need a closing DIV tag on the end.
Also, in your ng-repeat, your variable name should be different to the array. I'd suggest something like:
ng-repeat="p in products" or ng-repeat="product in products"
Hopefully this helps.
I have two nested ng-repeat to list dishes of different categories, and I'm using UI Sortable to be able to sort those lists. The ng-model name for the latter is dynamic (matches the value of the category listed) and I simply don't know how to set that name and make it work.
I used $eval() to set that dynamic name in the ng-repeat and works fine, but tried the same for the model and it doesn't work. Any ideas? Thank you!
"categories" object:
All categories have items, for example first one "breakfast" (matching the "value" of the category) will look like this:
What I've tried:
<div ng-repeat="cat in categories">
<div class="row">
<div class="category-title">{{cat.name}}</div>
</div>
<div ui-sortable ng-model="cat.value">
<!-- <div ui-sortable ng-model="$eval(cat.value)"> -->
<div class="row" ng-repeat="(key,dish) in $eval(cat.value)">
<div class="dish-title">{{dish.name}}</div>
</div>
</div>
</div>
The following should work:
<div ui-sortable ng-model="this[cat.value]">
<div class="row" ng-repeat="(key,dish) in this[cat.value]">
<div class="dish-title">{{dish.name}}</div>
</div>
</div>