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>
Related
I have a list of names that is connected to different objects in an array. I would like to, whenever you click one of the names, get the values and output them in another list respective to that that object. For right now I console.log the right values, but don't know how to output it:
{{ person.name }}
Controller:
$scope.updateIndex = function(index) {
console.log($scope.person[index]); //Logs the right values
}
How can I output the values from the object which name is clicked to:
<div class="wrap" ng-repeat="per in person">
<div class="box">
{{ person.name }}
</div>
<div class="box">
{{ person.age }}
</div>
<div class="box">
{{ person.town }}
</div>
<div class="box">
{{ person.country }}
</div>
<div class="box">
{{ person.gender }}
</div>
</div>
Thanks!
You can store the variable in the variable an use it:
$scope.updateIndex = function(index) {
$scope.currentPerson = $scope.person[index]
}
<div class="wrap" ng-repeat="per in currentPerson">
<div class="box">
{{ person.name }}
</div>
<div class="box">
{{ person.age }}
</div>
<div class="box">
{{ person.town }}
</div>
<div class="box">
{{ person.country }}
</div>
<div class="box">
{{ person.gender }}
</div>
</div>
Just assign $scope.person[index] to another variable in the click function and output it in the template.
In my use case I would like append elements to the respective object in each iteration which is generated dynamically. It is appending to the end of all objects. Here is my code,
HTML:
<div class="comment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
<h5>Discussion Board</h5>
<ol class="question_ol" >
{{ if .ViewData.Questions }}
{{ range .ViewData.Questions }}
<li>
<input type="hidden" id="question_id" class="question_id_val" value="{{.QuestionId}}"/>
<div class="q-comment">
<div class="qanda questiondiv" id="questionarea" name="questionarea">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">3</span>
<a class="downvote"></a>
</div>
<div >
<div class="qanda-info">
<h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
</div>
<p id="quest_text">{{.QuestionText}}</p>
</div>
</div >
<div class="qanda-info">
<div class="user-info">
<img src="/resources/img/team-small-2.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
<a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
</div>
</div>
</div>
</li><!--end of individual question-->
{{ if .Answers }}
<div class="form-input">
<label for="answers">{{len .Answers}} Answer(s)</label>
</div>
{{ range .Answers }}
<ul class="children">
<li>
<div class="q-comment">
<div class="qanda">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">{{.Upvotes}}</span>
<a class="downvote"></a>
</div>
<div >
<p>{{.AnswerText}}</p>
</div>
</div>
<div class="qanda-info">
<div class="user-info">
<img alt="User" src="/resources/img/team-small-4.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
</div>
</div>
</div>
</li><!--end of individual comment-->
</ul>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
</ol>
</div><!--end of comments list-->
** And my JS code: **
$('.questiondiv').on('click', '.submitanswerbutton', function() {
console.log("In submit button");
date = "17 June 2015"
var howtiId = $('#howti_id').text();
var question_id = $(this).closest('li').find('.question_id_val').val();
var answer_text = $('.answertext_val').val();
console.log(howtiId);
console.log(question_id);
console.log(answer_text);
$.getJSON("/submitanswer?howti_id="+howtiId+"&question_id="+question_id+"&answer="+answer_text, function(data) {
console.log("answer Response "+data);
newAnswer = "<ul class='children'><li><div class='q-comment'><div class='qanda'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>3</span><a class='downvote'></a></div><div><p>"+answer_text+"</p></div></div><div class='qanda-info'><div class='user-info'><img alt='User' src='/resources/img/team-small-4.png' /></div><h6>{{.UserId}}</h6><span class='date alt-font sub'>"+date+"</span></div></div></div></li></ul>"
$('ol').append(newAnswer);
//$(this).closest('.comment-list-new').find('.question_ol').append(newAnswer);
});
$(this).closest('.answersectiondiv').remove();
});
I am trying append answer to the respective question. But it is appending to the last question.
Could someone help me with this?
Firstly add a container div under the questions_ol div to include every question with its answers, give it the class question_and_answers, make sure it's under the loop.
Then use jquery selectors with $(this) to reach the relative answers list. Instead of:
$("ol").append (...
Use:
$(this).closest ('.question_and_answers ').append (...
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.
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>