catch is that
I would like to display the div only once, not three times:
//angular js code
$scope.arr=["sunday","mpnday","tuesday"];
//html view
<ul>
<li ng-repeat="x in arr">
<div><p>{{ x }}</p>
</div>
</li>
</ul>
Try:
<ul>
<li ng-repeat="x in arr">
<div ng-if="$first">
<p>{{ x }}</p>
</div>
<p ng-if="!$first">{{ x }}</p>
</li>
</ul>
Anyway, I would recommend you to rewrite your markup in valid way. div inside li is quite bad markup style.
Related
I have an ng-repeat inside another one and I am trying to find out the parents index.
Because it is being ordered after the fact, I can't do the typical
ng-repeat="(step_index, step) in flow"
Does anyone know why this would be happening?
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parent.$index }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
You can use ng-init="$parentIndex = $index" on your parent <li>, then call $parentIndex in the child ng-repeat
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'" ng-init="$parentIndex = $index">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parentIndex }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
I have object which contains question and list of choices. I'm display this object on the page using nested ng-repeats. When I'm trying to change 'question' everything changes just fine, but when I'm trying to change 'choice' nothing happens. Where is the problem?
My page:
<div class="panel">
<div class="row">
<div class="large-12 columns">
<h3>{{ title }}</h3>
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="choice in q.choices">
<input type="text" ng-model="choice" name="answer{{ q.id }}" >
</li>
</ul>
</br>
</li>
</ol>
<a class="button" ng-click="submitQuiz()">Submit</a><br>
{{ quiz }}
</div>
</div>
Screenshot of the page:
https://www.dropbox.com/s/i52fwq1os0cvcr9/repeat.png?dl=0
Problem is that choice is a string, so when you are changing it in child scope it is changing only in child scope.
To fix this - reference it by index in array ng-repeat="(choiceIndex,choice) in q.choices,ng-model="q.choices[choiceIndex]".
Also to prevent inputs from loosing focus when changing items - you will need to add track by $index in ng-repeat directive.
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="(choiceIndex,choice) in q.choices track by choiceIndex">
<input type="text" ng-model="q.choices[choiceIndex]" name="answer{{ q.id }}">
</li>
</ul>
</li>
</ol>
working example:
http://plnkr.co/edit/GJacjkzfT4FpfC6szsNk?p=preview
For better understanding how angular scopes works, I recommend reading this: https://github.com/angular/angular.js/wiki/Understanding-Scopes
Here is my angular View
<li class= "riskmanagementlink" ng-repeat="link in links">
<h3> {{link.Description}} </h3>
<a> {{link.Title}} </a>
<hr/>
</li>
I would like to remove the hr tag for the last list item. Can anybody help me do this please?
The ng-repeat directive comes with some extra properties like $last, which indicates that you're on the last item of your collection.
<li class="riskmanagementlink" ng-repeat="link in links">
<h3> {{ link.Description }} </h3>
<a> {{ link.Title }} </a>
<hr ng-if="!$last" />
</li>
More info in the docs.
according to this solution i built my AngularJS app. Now i want to access a parent's value within a nested structure.
I tried this, but it does not work: http://jsfiddle.net/BwDAP/
<body ng-app="WeeklyApp" ng-controller="WeeklyController" >
<div ng-repeat="week in myData">
<div ng-repeat="day in week.days">
{{day.dow}} - {{day.templateDay}}
<b>Jobs:</b><br/>
<ul>
<li ng-repeat="job in day.jobs">
{{job.name}}
<br />
<!-- PARENT -->
parent: {{job.parent.dow}}
</li>
</ul>
</div>
</div>
</body>
Any solutions?
thx
A haha, too easy ;-)
Here is the solution: http://jsfiddle.net/Lm6KZ/
<body ng-app="WeeklyApp" ng-controller="WeeklyController" >
<div ng-repeat="week in myData">
<div ng-repeat="day in week.days">
{{day.dow}} - {{day.templateDay}}
<b>Jobs:</b><br/>
<ul>
<li ng-repeat="job in day.jobs">
{{job.name}}
<br />
<!-- PARENT -->
parent: {{day.dow}}
</li>
</ul>
</div>
</div>
</body>
I set up an ng-repeat to rollout a bunch of elements from a JSON file however I would like each element to have a incremental class name .item-1, .item-2, .item-3.
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ item.length }}"></span>
</div>
</div>
I would like to add the number to class="item-{{ item.length}}" but I can't seem to get this working.
I don't know what is the benefit of generating dynamic class names like this. A class should mean a class of similar objects.
It's still possible with $index:
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngRepeat
As documented on https://docs.angularjs.org/api/ng/directive/ngRepeat just use $index
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>