Angular displaying data in a deep populated object - javascript

Html
<div ng-controller="topicController">
Dashboard | Topics | Users
<h4>{{topic.user_name}} posted a topic</h4>
<h2>{{topic.topic}}</h2>
<h4>Description: {{topic.description}}</h4>
<div ng-controller="postController">
<label>Post Your Answer here</label>
<form>
<textarea name="post" ng-model="new_post.post"></textarea>
<input type='submit' value='Submit' ng-click='addPost(users._id, topic._id, users.name)'>
</form>
<div ng-repeat="x in topic.posts">
<h4>{{x.post}}</h4>
<p>Likes:{{x.up_vote}} Dislikes:{{x.down_vote}}</p>
<ul ng-repeat="i in topic.posts[x].comments">
<li>{{topic.posts[x].comments[i].comment}}</li>
</ul>
<div ng-controller="commentController">
<form>
<textarea name="comment" ng-model="model.comment"></textarea><br>
<input type="submit" value="Submit" ng-click="addComment(users._id, x._id, users.name)">
</form>
</div>
</div>
</div>
</div>
As you can see in the image below, I have all the data popualted, the Topic Object, inside topic Posts, & inside posts Comments.
In my my html i can display the topic content & the posts properly, but having difficulty displaying the comments.
The comments are adding to DB but not showing. I have a ng-repeat to itterate through each comment of each post but its just not showing up. Attaching Image to display the entire object in my console.
Is my ng-repeat wrong ?

Your x is a post object, not an index. So your inner ng-repeat should be
<ul ng-repeat="c in x.comments">
<li>{{c.comment}}</li>
</ul>

You are misunderstanding what x represents inside your ng-repeat for the comments. x is the actual comment object - each item in the comments array on the post. So topic.posts[x] makes no sense. It should just be x.
So, obviously, rename it to comment, instead of x.
Bonus tip: always use track by with your ng-repeat expressions for performance reasons. In your case, it would be track by comment._id.

Related

duplicate div containing set of fields in the same dom

i am loading handlebar templates in the two div locations(like add and edit tabs both are jsps) from the same page. so i have duplicate elements in the DOM object, since it is a template which is coming from server location. you can see the sample code below
<div id="add">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
<div id="edit">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
I can't modify the div container ids i.e exploding since some javascript functions attached to it based on that id to explode address field.
here the problem is if i made any changes to the edit tab, address "exploding" div, it is effecting in add tab address "exploding" since ids are repeated. i have tried jquery detach method to remove the dom elements, but didn't get proper result. Its a web application based on spring boot.
is there any possibility to load jsps dynamically through jquery, i have tried load method as well, but the call is going through controller. I didn't feel it as better option.
Thanks & Regards
krishna K

Angular: Enable form input for only certain sections of html form

I setting up a form in html to allow users to edit individual profiles if the check box is checks. So far, I'm using a ngFor loop to populate the page with data. The issue is that if I press the checkbox, every item in the returned data becomes editable.
The html looks like this:
<ul class="profiles">
<li *ngFor="let profile of profiles">
<ngb-panel title="Profile ID: {{profile.id}}">
<ng-template ngbPanelContent>
<label>Check here to edit:
<input type="checkbox" [(ngModel)]="checked">
<form>
<fieldset [disabled]="!checked">
<input
type="text"
[(ngModel)]="profile.profileName"
name="profileName"
>
</fieldset>
</form>
</ng-template>
</ngb-panel>
</li>
</ul>
Technically speaking, this does work; once the checkbox is checked, the input below is enabled. The issue here is that, because I'm using an ngFor loop to populate the html with the profile information, checking one checkbox enables ALL the profile sections. What I need to do is set this up so that each profile section will only be enabled if its individual edit checkbox is checked off. Are there any good ways to set this up, while still allowing the for loop?
The checked variable in your example does not appear to be profile-specific (I would need to see your JS code to be 100% sure, but that's what it looks like) so you'll need to make a checked property that corresponds to each profile, either as a property of a profile object, or in some other fashion.
<fieldset [disabled]="!checked"> <-- this is going to be the same for all profiles
<input type="text" [(ngModel)]="profile.profileName" name="profileName">
</fieldset>
In your ts, create a temporary array of Profiles which holds a key for checked for each Profile. That way each profile can be checked/unchecked.
let tempProfiles = profiles.map((elem) => {
let tempElem = {...elem} // don't want to modify the original Objects
tempElem['checked'] = false
return tempElem
})
then loop with tempProfiles in HTML
<ul class="profiles">
<li *ngFor="let profile of tempProfiles">
<ngb-panel title="Profile ID: {{profile.id}}">
<ng-template ngbPanelContent>
<label>Check here to edit:
<input type="checkbox" [(ngModel)]="profile.checked">
<form>
<fieldset [disabled]="!profile.checked">
<input
type="text"
[(ngModel)]="profile.profileName"
name="profileName"
>
</fieldset>
</form>
</ng-template>
</ngb-panel>
</li>

Accessing ng-model from nested templates generated by ng-repeat

I'm having trouble accessing values from an ng-repeat directive inside a nested template. Hope I'm using the right terminology, but here's some code that may make it clearer.
outer-template.html
<div ng-repeat="test in $ctrl.test_list">
<div id="test-{{ $index }}" layout="row">
<inner-thing ng-model="test"></inner-thing>
</div>
</div>
inner-template.html
<div>
<md-input-container>
<label>ID</label>
<input type="text" ng-model="test.id">
</md-input-container>
</div>
This is what I was hoping would work. The reasons it doesn't seem fairly obvious even to me, but I'm wondering if something like this is possible. I'm already aware that I can, from the 2nd (inner) controller, access each test using $scope.parent.test_list, but what I really want is for the 2nd (inner) template to be aware of which test it was "given" from the ng-repeat directive.
Well in case anyone has this same question, the answer is quite simple:
inner-template.html
<div>
<md-input-container>
<label>ID</label>
<input type="text" ng-model="$parent.test.id">
</md-input-container>
</div>

AngularJS ng-repeat input

I am trying to make comments functionality using Angular js. The problem is that when i want to write a comment for a post, the text is also writing inside other input elements (comments). I write a text inside one input, but it writes it in all inputs
So for example same is happening with this code
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="$parent.new">
</div>
</div>
if i use new instead of $parent.new i get undefined, but when i use $parent.new and i write in one input, it also writes in other inputs.
The issue is that you are assigning all of the inputs to the same model, so your inputs are all in sync with the same object.
What you need is to assign each input to a different model. I'm guessing you need these models to be dynamic, so you should use an array as your model and track your ng-repeat by $index like so:
<div ng-repeat="comments in articles track by $index">
<div>
<input type="text" ng-model="arr[$index]">
<span ng-if="arr[$index]">
{{arr[$index]}}
</span>
</div>
</div>
Now, in your controller, you can initialize the empty arr like so:
$scope.arr = [];
Now, your inputs will be in sync with $scope.arr depending on the index they were in.
Try out this jsfiddle for an example.
This is because you've giving same model (ng-model="$parent.new") for all of the inputs What you should do to avoid this problem is assign different model to each input element. Something like
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="comments">
</div>
</div>
Change ng-model of input to
<input type="text" ng-model="comments.comment">

Angularjs three state checkbox with ng-repeat issue

I'm trying to get a list of questions (retrieved dynamically so we can't hard code them) and then using ng-repeat list them out with a three state checkbox next to each (true, false, null).
The code below works to show the questions with the correct checkboxes, however each time you click on 1 checkbox they all change as they are using the same ng-model (I assume).
How do I get around this?
Thanks
<div class="select-all-checkboxes" flex="100" ng-repeat="(guidCustomerId,item) in items" ng-if="item.type=='Mandatory'">
<span three-state-checkbox ng-model="idv.checkboxModelThree" ng-change="idv.checkBoxonChange()" ng-checked="exists(item, selected_mandatory)"></span>
<h8-red>{{item.question}}</h8-red>{{item.answer}}
<br /><br />
</div>
Can you try?
<div class="select-all-checkboxes" flex="100" ng-repeat="(guidCustomerId,item) in items" ng-if="item.type=='Mandatory'">
<span three-state-checkbox ng-model="item.value" ng-change="item.value = !item.value" ng-checked="exists(item, selected_mandatory)"></span>
<h8-red>{{item.question}}</h8-red>{{item.answer}}
<br /><br />
</div>

Categories

Resources