When a person clicks No on whether or not they want to trade in their car it is supposed to remove that element and add the other element asking if they have a car to trade in. However, when they click it does not remove the element but simply makes the car variable empty. It seems simple enough... don't know why it's not working.
<div class="inner-box" ng-if="car.length > 0">
<p class="lite">Would you like to trade in your</p>
<p class="heavy">{{car}} ?</p>
Yes
No
</div>
<div class="inner-box" ng-if="car.length == 0">
<p class="heavy">Do you have a trade in ?</p>
Yes
No
</div>
I've seen another question about this on here but their problem was that their nf-if wasn't a condition.
Just add a controller function for delete car
<div class="inner-box" ng-if="car">
<p class="lite">Would you like to trade in your</p>
<p class="heavy">{{car}} ?</p>
Yes
No
</div>
<div class="inner-box" ng-if="!car">
<p class="heavy">Do you have a trade in ?</p>
Yes
No
</div>
------JS---
$scope.deleteCar = function(){
$scope.car = '';
};
Related
I have an array of comments. For each of the comment, I have a hidden form where you can reply. That item in each object of the array is called: comment.showSubCommentForm. When I click on Reply, I want to be able to reply with a comment and the function called: commentOnSubPost.
I load my data in chunks of 10 (lazy loading) which I am doing by using the infinite-scroll-distance Angular module. Every time I reach the end of the page, I get the next 10 items and add them to the $scope.comments array, which you can see below is what I am running my ng-repeat on .
The problem is that, although the commentOnSubPost works really well as in it adds the reply to the comment, I have reload the data so I can get the updated $scope.comments with the new reply. BUT - as I have implemented lazy loading, how do I do that if say I am on the 20th page?
I looked at some similar posts but their approach from mine was very different so am very lost.
My HTML:
<div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
<div class="row">
<div ng-repeat="comment in comments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="#">SomeLink</a>
<div>
<p >{{ comment.date }} <a ng-href="/wall#/profile/main/{{ comment.userID }}">{{ comment.fullname }}</a> says <i class="commentReply"><a href ng-click="comment.showSubCommentForm = !comment.showSubCommentForm"><small>Reply</small></a></i></p>
<p class="mainComment">
{{ comment.comment }}
<p class="meta"><i class="showReply"><a href ng-click="comment.showReplies = !comment.showReplies"><small>Show Replies</small></a></i></p>
</p>
</div>
<div ng-show="comment.showSubCommentForm">
<form ng-submit="commentOnSubPost( post._id, comment._id, subComment)">
<div class="form-group">
<div class="form-group">
<textarea ng-model="subComment" class="form-control" placeholder="Reply to the above comment"></textarea>
</div>
<input type="submit" value="Reply">
</div>
</form>
<div ng-show="comment.showReplies" ng-repeat="subComment in comment.subComments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="/wall#/profile/main/{{ comment.userID }}"><img ng-src="{{ subComment.profilePic }}" class="avatar" style="border-radius: 50%"></a>
<div class="post-subComments">
<p class="meta">{{ subComment.date }}<a ng-href="SomeLink"> {{ subComment.fullname }}</a></p>
<p>
{{ subComment.comment }}
</p>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
I won't add too much information here as I don't want to overload this post but if you need any particular information, please do let me know. I just need to know how do I reload the data (or not if there's another approach) so that I can get the latest data.
I hope this makes sense.
Thanks in advance!
Like you have $scope.comments = []; then on each call you just have to append upcoming data to this array.
Like $scope.comments = $scope.comments.concat(response.data);
In this way lazy loading will work.
I fixed this with making a Node route which gives back the exact comment I have just added. Then, I found that commentID in my $scope.comments and made it's subCommenemts to the one I have locally.
It does the job and the data is real. One drawback is that if at that time, there's another comment, it won't show up until the page's refreshed but I'm not too fussed about that.
I am a beginner at angular. I am pretty certain I am doing this the completely incorrect way but because I finally have it "somewhat working" as it works on the second click I am stuck going in this direction and can't seem to figure out another way to do it.
The filter sorts on the second click because it is initialing as "undefined" before the first click and sets it based on that I believe.
In my html:
<div class="col-xs-12 col-sm-4 location-list" ng-repeat="key in careerlist.location">
<div class="locations" ng-click="careerlist.criteriaMatch()">{{key}}
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 job-container" ng-repeat="job in careerlist.career | filter : searchText | filter: selectExperience | filter: careerlist.criteria.name">
<h2>
{{job.title}}
</h2>
<h3>
{{job.location}}
</h3>
<div class="job-description" ng-bind-html="job.description | limitHtml : 200">
</div>
<br><br>
<button>Read More</button>
</div>
<br><br>
</div>
</div>
In my controller:
cl.criteriaMatch = function( criteria ) {
jQuery(document).on('click', '.locations', function(){
cl.criteria = {};
console.log("just the element text " + jQuery(this).text());
cl.criteria.name = jQuery(this).text();
return function( criteria ) {
return criteria.name === criteria.name;
};
});
};
Use ng-click instead of jQuery#on('click'). Angular does not know that the filter should be updated.
Update
#Makoto points out that the click is bound twice. It very much looks like you should just remove the jQuery binding altogether. I would even go so far as suggesting removing jQuery from you project.
I'm working on a Store application and I need to show 2 different strings based on a response.
If I receive the response with no item title I need to show "No Item Title Found", else, I need to show item's title limited to a certain amount of characters.
Here is my code:
<div ng-switch on="item.title">
<div ng-switch-when="!item.title.length">
<p class="prod-title cursor-pointer"
ng-click="searchCtrl.openItemTab(item,event)">
{{ item.title = 'Title Not Found'}}</p>
</div>
<div ng-switch-default>
<p class="prod-title cursor-pointer"
ng-click="searchCtrl.openItemTab(item,event)">
{{ item.title | limitTo:60 }}</p>
</div>
</div>
I'm able to see Items titles when their length is greater than 0, but, I'm not able to see "No Item Title Found" when length is equal to 0.
Any suggestion? Thanks in advance.
use ng-if directive to show 'Title not found' when you don't have an available title.
<p ng-if='!item.title' class="prod-title cursor-pointer" ng-click="searchCtrl.openItemTab(item,event)">
Title Not Found
</p>
<p ng-if='item.title' class="prod-title cursor-pointer" ng-click="searchCtrl.openItemTab(item,event)">
{{item.title}}
</p>
Make the ng-switch like:
<div ng-switch on="item.title.length">
<div ng-switch-when="0">
Currently what you have means
if item.title (expression) equals true (!item.title.length == item.title) enter the first block
in any other case enter the second.
Plunker
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
Not sure exactly what's going on, but it looks like my expressions are not getting evaluated or expanded.
<div ng-repeat-start="q in questions">
<h3>{{q.text}}</h3>
<p ng-if="q.type == 'checkbox'">
<p ng-repeat-start="a in q.answers">1 {{q.type}}
<input type={{q.type}}>{{a.text}}</input><br/>
</p>
<p ng-repeat-end></p>
</p>
<p ng-if="q.type == 'radio'">
<p ng-repeat-start="a in q.answers">2 {{q.type}}
<input type={{q.type}}>{{a.text}}</input><br/>
</p>
<p ng-repeat-end></p>
</p>
</div>
<p ng-repeat-end></p>
The output shows the code is executing every if, as if they were both true. This produces duplicate checkoboxes/radio buttons.
1 checkbox Voice calling.
1 checkbox Text messaging.
1 checkbox Data access
2 checkbox Voice calling.
2 checkbox Text messaging.
2 checkbox Data access
It should look like this:
1 checkbox Voice calling.
1 checkbox Text messaging.
1 checkbox Data access
2 radio new question 1.
2 radio new question 2.
2 radio new question 3.
Your problem is nested p tag more details
<p>this
<p>will not work</p>
</p>
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
In that case ng-if directive will not evaluate properly. So if you use div or span instead of p then it should works
<div ng-repeat-start="q in questions">
<h3>{{q.text}}</h3>
<span ng-if="q.type == 'checkbox'">
<p ng-repeat-start="a in q.answers">1 {{q.type}}
<input type={{q.type}}>{{a.text}}<br/>
</p>
<p ng-repeat-end></p>
</span>
<span ng-if="q.type == 'radio'">
<p ng-repeat-start="a in q.answers">2 {{q.type}}
<input type={{q.type}}>{{a.text}}<br/>
</p>
<p ng-repeat-end></p>
</span>
</div>
<p ng-repeat-end></p>
see the Demo