This list sets the value of abc according to the item clicked.
<ul>
<li><a ng-click="abc = 'score'">Score</a></li>
<li><a ng-click="abc = 'count'">Count</a></li>
<li><a ng-click="abc = 'average'">Average</a></li>
</ul>
List.items contains values that correspond to score, count and average. Items are ordered by the value of abc.
<ul>
<li ng-repeat="item in list.items | orderBy:'-' + abc">
{{ 'item.' + abc }}
</li>
</ul>
My only problem is this line: {{ 'item.' + abc }}
How do I bind the value of {{ item.score }}, {{ item.count }} or {{ item.average }} based on the value of abc?
Use [] object notation when object properties are variables. This is standard javascript practice
{{ item[abc] }}
Related
<div ng-repeat="user in users | orderBy:'-type'">
<p>{{user.name}}</p>
<p>{{user.type}}</p>
</div>
I have type : 12, 5, 3
I want to give higher precedence to 12 then 3 move 5 to end of line
Can you try this hope this will help you
You need to add group filter
<ul ng-repeat="(key, value) in countries | orderBy: 'status' | groupBy: 'status'">
Status : {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
See below jsfiddle
https://jsfiddle.net/cojtn8vm/6/
You need to sort the collection yourself before repeating it or you need to convert user.type to string and then you can use like given below link
[1]: https://jsfiddle.net/kinjalpgor/cojtn8vmenter code here
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:'!'+test">
{{ x }}
</li>
</ul>
How to display all the items in list initially and then exclude the items as i type? Initially, none of the items are displayed. Only after i type something in textbox, it displays the items excluding the one which i typed.
You are missing angularjs strict:true operator in filters
this is what you need
<li ng-repeat="x in names | filter:'!'+test:true">
{{ x }}
</li>
Plnkr
On top of my head setting an initial value in model $scope.test = '' should resolve the issue for you.
No need of this '!' ,you just have to pass ng-model value
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
I'm using AngularJS v1.2.9.
Inside ng-repeat, how do i use check the value of object and do action based on condition?
In English, something like:
if `X` is not null, then show `X`. Is it possible?
Here's my ng-repeat skeleton:
<li ng-repeat="r in results">
<div>{{ r.title }}</div>
<div>{{ r.location }}</div>
<!--
if ( r.date!=="null" ) {
<div>{{ r.date }}</div>
} else {
<div>Date not confirmed yet.</div>
}
-->
</li>
I need to show r.date if it is not null. If it is null, then i say something else.
Please kindly help. Thanks all.
<li ng-repeat="r in results">
<!-- If r.date contains a value, show it -->
<span ng-if="r.date">{{r.date}}</span>
<!-- If r.date does not contain a value show placeholder text -->
<span ng-if="!r.date">Date not confirmed yet.<span>
</li>
Also see What does an exclamation mark before a variable mean in JavaScript
Update
Question wasn't much clear so here is what you wanted just by having ng-bind directive in place. If the content is bigger then you can switch to the way suggested by #JustOneMoreQuestion below.
<li ng-repeat="r in results" ng-if="r.date">
<div ng-bind="r.date ? r.date : 'Date not confirmed yet.'"></div>
</li>
You could easily do by using ng-if
<li ng-repeat="r in results" ng-if="r.date">
<!--
if ( r.date!=="null" ) {
{{ r.date }}
}
-->
</li>
OR go for a filter which will filter out those will create a collection of element which has date in it.
<li ng-repeat="r in results| filter: { date: '' }">
<!--
if ( r.date!=="null" ) {
{{ r.date }}
}
-->
</li>
Check this one,
<li ng-repeat="r in results" >
<div data-ng-if="r.date !== 'null'">
Your Date
</div>
<div data-ng-if="r.date == 'null'">
Date not confirmed yet
</div>
</li>
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>
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>