I have the following data which i want to use ng repeat on:
$scope.doctors=[{patch:'BARIJPUR',doctor:'RAMA SENA',doctor:'SMRITI IRANI',doctor:'JAGDISH NAIR',
patch:'KIRI',doctor:'ASHISH NAIK',doctor:'SMRITI IRANI',doctor:'SAIRAJ NAIK',
patch:'JAMNAGAR',doctor:'RATAN PANDEY',doctor:'RAMAN SHIVOLKAR'
}];
Im trying to use it like this:
<div id='cssmenu' class="visible-xs" >
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li class='has-sub' >{{doc.patch}}</span>
<ul>
<li><span>{{doc.doctor}}</span></li>
</ul>
</li>
</ul>
</div>
the current output im getting is shown in the following link:
current output
the expected output im getting is shown in the following link:
expected output
am i doing something wrong? have been at it for 1 and half hour now!
From your comment I assume that you're having a problem with the JS associative array, so here is an example of implementation:
$scope.doctors=[
{patch:'BARIJPUR',doctors:['RAMA SENA' 'SMRITI IRANI', 'JAGDISH NAIR',]},
{patch:'KIRI', doctors:['ASHISH NAIK', 'SMRITI IRANI', 'SAIRAJ NAIK']},
{patch:'JAMNAGAR', doctors:['RATAN PANDEY', 'RAMAN SHIVOLKAR']}
];
<div id='cssmenu' class="visible-xs" >
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li class='has-sub' ng-repeat="doc in doctors"><a href='#'><span>{{doc.patch}}</span></a>
<ul>
<li ng-repeat="doctor in doc.doctors"><a href='#'><span>{{doctor}}</span></a></li>
</ul>
</li>
</ul>
</div>
<div class="row" ng-repeat="doc in doctors">{{doc.patch}}
<div class="cell" ng-repeat="cell in doc.doctor">{{cell}}
</div>
</div>
try this
You have two problems:
Array definition
Instead of creating multiple doctor entities you should just create an array of them:
$scope.doctors=
[
{"patch":"BARIJPUR", "doctors":["RAMA SENA", "SMRITI IRANI","JAGDISH NAIR"]},
{"patch":"Anna", "doctors":["ASHISH NAIK", "SMRITI IRANI", "SAIRAJ NAIK"]},
{"patch":"Peter","doctors":["RATAN PANDEY", "RAMAN SHIVOLKAR"]}
];
ng-repeat
You used it in wrong place. It should be applied to <li> element - which basically you want to repeat, not to <a> or <span>:
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li ng-repeat="doc in doctors" class='has-sub'><a href='#'><span>{{doc.patch}}</span></a>
<ul>
<li ng-repeat="doc in doc.doctors"><a href='#'><span>{{doc}}</span></a></li>
</ul>
</li>
</ul>
Demo plnkr
<div class="row" ng-repeat="doc in doctors">{{doc.patch}}
<div class="cell" ng-repeat="cell in doc.doctor">{{cell}}
</div>
</div>
yes this works for me! done! solved!
Related
I have a project with Angular where I don't want to use a select element with ng-options, so I made up a list with different options in order to select one of them.
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry"><p>{{c.name}}</p></li>
</ul>
</div>
So the option selected would modify another element where the chosen option would be displayed.
<div>
<ul>
<li>{{selectedCountry}}</li>
</ul>
</div>
In order to do that, I would need to pass the data from the chosen option of the first element into the 2nd one. I have tried doing something like this
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry = {{c}}"><p>{{c.name}}</p></li>
with no success.
You can check the plunker here Thanks in advance
I suggest you to use a function over there like this in the DEMO
<li ng-repeat="c in shippingCountry" ng-click="Click(c)"><p>{{c.name}}</p></li>
Having this method in your controller
$scope.Click=function (c)
{
$scope.select=c;
}
It creates child scope for each iteration, so explicitly refer parent scope:
Change like this,
<ul>
<li ng-repeat="c in shippingCountry" ng-click="$parent.selectedCountry = c"><p>{{c.name}}</p></li>
</ul>
DEMO
I've fixed your plunker here. It would be better to use methods in scope for this operations because they work in current scope, not in child
<li ng-repeat="c in shippingCountry" ng-click="selectCountry(c)">
<p>{{c.name}}</p>
</li>
// .html
<div>
<ul>
<li>{{selectedCountry.item}}</li>
</ul>
</div>
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry.item = c"><p>{{c.name}}</p></li>
</ul>
</div>
// controller
$scope.selectedCountry = {
item: $scope.shippingCountry[0]
};
Example
I am trying to avoid using the same filter on the same collection multiple times in AngularJS application.
What is the correct way to do it:
<div ng-app="myApp" ng-controller="PeopleCtrl">
<ul ng-init="(person in people|filter:{show:true}) as myPeople" ng-if="myPeople.length>0">
<h4>My People</h4>
<li ng-repeat="person in myPeople">{{person.name}}; display: {{person.show}};
</ul>
</div>
CODE PEN
When I use (person in people|filter:{show:true}) as myPeople I try to use an alias in order to not repeat the same filter{show:true} everywhere...
You should do it something like this:
<div ng-init="myPeople = (people | filter:{show:true})">
<div ng-if="myPeople.length>0">
<h4> My People</h4>
<ul>
<li ng-repeat="person in myPeople">
{{person.name}}; age: {{person.age}}; show: {{person.show}};
</li>
</ul>
</div>
</div>
I am trying to iterate over a JSON object userTypes.
For the below code:
In the 1st ng-repeat:
{{user.type}} outputs 'Parent'(as expected),
{{user.options}} outputs '[{"option1":"11QWERT","option2":"22QWERT"}]'(as expected).
But in the 2nd ng-repeat, I am not able to iterate through the user.options and output each of the {{options}}
What should be changed to get the option1 and option2 as the outputs in 2nd ng-repeat ?
JS snippet
var userTypes = [{
"type": 'Parent',
"options": [{
"option1": "11QWERT",
"option2": "22QWERT"
}]
}]
HTML snippet
<li ng-repeat="user in userTypes">
<p>{{user.type}}</p>
<p>{{user.options}}</p>
<li ng-repeat="option in user.options">
<p>
{{option}}
</p>
</li>
</li>
Replace your child <li> with <ul> and then you can iterate user.options like so:
<li ng-repeat="user in userTypes">
<p>{{user.type}}</p>
<ul ng-repeat="(key, value) in user.options[0]">
<p>{{key}}: {{value}}</p>
</ul>
</li>
Or if your options may include more then one object:
<li ng-repeat="user in userTypes">
<p>{{user.type}}</p>
<ul ng-repeat="option in user.options">
<li ng-repeat="(key, value) in option">{{key}}: {{value}}</li>
</ul>
</li>
If you don't need object keys:
<ul ng-repeat="option in user.options">
<li ng-repeat="item in option">{{item}}</li>
</ul>
Fiddle
Extended explanation:
In your example you have <li> tag inside another <li>:
<li ng-repeat="user in userTypes">
<li ng-repeat="option in user.options">
</li>
</li>
Since it is not a valid HTML browser will interprets this markup to following:
<li ng-repeat="user in userTypes">
</li>
<li ng-repeat="option in user.options">
</li>
Since ng-repeat creates new scope for each iteration you can't access user variable in second ng-repeat and iterator wouldn't run.
For this exact JSON input it should be like this:
<li ng-repeat="option in user.options">
<p>
{{option.option1}}
{{option.option2}}
</p>
</li>
However as you said you want non fixed number of options, update your JSON to be like this:
"options":["11QWERT","22QWERT"]
And then your code should work as you wanted it.
You can add each new element to list with simple coma before it.
Since user.options is an array you should loop it again. By doing that you will get an object, with that object you can access your options1 and option2 easily.
please refer working plunker:
http://embed.plnkr.co/5c3i5fY50jLP0fFgxkUX/preview
see through the code if you have any doubt.
Hope this helps
A little aside, but just found out you can render a valid list HTML using ng-repeat-start/end in combination with ng-if="false" for the given array of arrays to flatten them:
<ul>
<script ng-repeat-start="user in userTypes" ng-if="false"></script>
<li ng-repeat="item in user.options">{{item}}</li>
<script ng-repeat-end="" ng-if="false"></script>
</ul>
Just access the propertie of the option object in the second ng-repeat. Like option.option1
You should probably make your user.options an object and not an array containing a single object.
Note the difference between these:
[{"option1":"11QWERT","option2":"22QWERT"}]
{"option1":"11QWERT","option2":"22QWERT"}
You can then iterate the options with an ng-repeat like discussed here:
<li ng-repeat="(key, value) in user.options">
<p>{{ key }}: {{ value }}</p>
</li>
Today I faced a strange problem for me in AngularJS.
In this example I have two ng-repeat in product (two or three images and the same number of colors) and one ng-repeat for pagination (irrelevant in this case I assume).
HTML:
<div class="item-wrapper" ng-repeat="item in pagedItems[currentPage]">
<div class="item">
<!-- Item image -->
<div class="item-image">
<ul>
<li ng-repeat="desc in item._source.description" ng-show="$first">
<img class="preview" ng-src="server/{{desc.smallImage.url}}">
</li>
</ul>
</div>
<!-- Item details -->
<div class="item-details">
<div class="product-colors">
<ul class="btn-group pull-right">
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" />
</li>
</ul>
</div>
</div>
</div>
All I wanted to do is that click on one of colors (img.color) changes corresponding img.preview visibility. In my attempts I was always able to changed every img.preview in whole list, not the one I clicked on.
MY ATTEMPTS:
HTML
<li ng-repeat="desc in item._source.description" ng-show="$index === selectedColor">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index)">
JS (controller)
$scope.changeColor = function(idx) {
$scope.selectedColor = idx || 0; //default show always first img.preview from list
};
MY ATTEMPTS #2 (working)
HTML
<li><img class="preview" ng-src="server/{{desc[__selected === $index ? __num : 0].smallImage.url}}">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index, key)">
JS (controller)
$scope.changeColor = function(idx, key) {
$scope.__selected = key;
$scope.__num = idx;
};
This might be quite simple:
Considering desc and color will be referring to same object as they are of the same source.
So, desc and color should be identical and setting a property on either of them supposed to reflect on the other.
Make the changes as follow and try, havent tested though:
<li ng-repeat="desc in item._source.description" ng-show="item.__selected ? desc==item.__selected : $first">
and
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" ng-click="item.__selected = color" />
</li>
I tried using ng-repeat value,group1,group2
i'm getting
grp1
grp2
abc
def
value1
value2
I need
grp1
abc
valu1
grp2
def
valu1
Html:
<ul>
<li ng-repeat="heading in group1"> {{heading}} </li> // heading
<li ng-repeat="subheading in group2"> {{subheading }} </li> // sub heading
<li ng-repeat="val in value"> {{val}} </li> // value
</ul>
JavaScript:
$scope.group1 = [grp1,grp2];
$scope.group2 = [abc,def];
$scope.value = [value1,value2];
use $index to get other sub values
<div ng-repeat="eachval in group1">
<p>{{ eachval }}</p>
<p style="margin-left:15px">{{ group2[$index]}}</p>
<p style="margin-left:25px">{{ value[$index]}}</p>
</div>
Here is the WORKING FIDDLE
You should use a single array with three different keys
$scope.arrayList = [{group1Name : 'grp1',group2Name: 'abc', valueName: 'val1'},
{group1Name : 'grp2',group2Name: 'def', valueName: 'val2'}]
htlm would look like this
<li ng-repeat="group in arrayList">
<div>{{group.group1Name}}</div>
<div>{{group.group2Name}}</div>
<div>{{group.valueName}}</div>
</li>
You can write a simple javascript to modify your 3 arrays in 1 array.
Hope this helps
Use ng-repeat start and end points to iterate the first array, then use $index to reference the other elements:
<ul>
<li ng-repeat-start="heading in group1">{{heading}}</li> // heading
<li> {{group2[$index]}} </li> // sub heading
<li ng-repeat-end> {{val[$index]}} </li> // value
</ul>