I am working on AngularJs app where I need to show Name of customer but it should mail to link with email to his email address.
Eg : If name is Bob and email is bob#a.com , then on click of Bob it should show mail to bob#a.com
my html as as below
<div class="form-group mg-t20" ng-hide="!groupObj.accountExecutiveName">
<label class="wd50p control-label left fw-norm">Account Executive:</label>
<div class="wd48p blue-txt">
{{groupObj.accountExecutiveName}}
</div>
</div>
I do have email property . Its groupObj.accountExecutiveEmail . How do i do this in html ?
The following code should work in your case:
<a ng-href="mailto:{{ groupObj.accountExecutiveEmail }}" target="_blank">
{{ groupObj.accountExecutiveName }}
</a>
So your final HTML will look like this:
<div class="form-group mg-t20" ng-hide="!groupObj.accountExecutiveName">
<label class="wd50p control-label left fw-norm">Account Executive:</label>
<div class="wd48p blue-txt">
<a ng-href="mailto:{{ groupObj.accountExecutiveEmail }}" target="_blank">
{{ groupObj.accountExecutiveName }}
</a>
</div>
</div>
Cheers!
You can add something like this to your template:
<a ng-href="mailto:{{groupObj.accountExecutiveEmail}}" target="_blank">
{{groupObj.accountExecutiveName}} --> here will be the item's name
</a>
mailto: in an <a> tag is the way to go.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Email_links
Bob
Just use a mailto link
<a ng-href="mailto:{{groupObj.accountExecutiveEmail}}">Send email</a>
Angular2+:
<a [href]="'mailto:' + groupObj.accountExecutiveEmail" target="_blank">Send mail</a>
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 using ng-repreat to display a number of posts on my site and I also allow users to filter the posts by keying in any search phrase in a search input box. It is working fine but I don't know how to use google analytics to track what the users are searching for because the search term is not reflected on my URL. (i.e. the URL is remains as domain-name/#!/content instead of changing to domain-name/#!/content?q=....+... ).
Not sure how to work around this. Really appreciate if you can point me to some resources. Thank you.
This is a simplified version of my code
<input ng-model="vm.searchKey" type="text" placeholder = "Search..." />
<div class="card" ng-repeat="post in vm.posts | filter: vm.searchKey">
<a ng-href="#!/post/{{lifePost.post_id}}">
<img class="card-img" src="{{post.img_url}}">
<div class="card-img-overlay">
<p class="card-text">{{post.tagline_grp}}</p>
<h4 class="card-title">{{post.post_title}}</h4>
<p class="card-text">{{post.post_excerpt}}</p>
</div>
</a>
</div>
I figure out how to do this by enabling Site search Tracking for GA, detect the change event when user key in a search key and send a virtual pageview over.
HTML code
<input ng-model="vm.searchKey" ng-model-options='{ debounce: 1000 }' ng-change='vm.trackSearchKey()' type="text" placeholder = "Search..." />
<div class="card" ng-repeat="post in vm.posts | filter: vm.searchKey">
<a ng-href="#!/post/{{lifePost.post_id}}">
<img class="card-img" src="{{post.img_url}}">
<div class="card-img-overlay">
<p class="card-text">{{post.tagline_grp}}</p>
<h4 class="card-title">{{post.post_title}}</h4>
<p class="card-text">{{post.post_excerpt}}</p>
</div>
</a>
</div>
JS code
vm.trackSearchKey = function() {
if (vm.searchKey) {
ga('set', 'page', '/?q='+vm.searchKey);
ga('send', 'pageview');
}
}
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>
In AngularJS, to simply show a field through an a tag, I would do in this way:
<div ng-show="aField">Content of aField</div>
<a ng-click="aField=true">Show aField</a>
until here, no problem.
I would like now to put more buttons and fields so that, when I click on A it shows the content of A, then when I click on button B, content of A disappears and content of B appears.
How can I do this? Thank you.
UPDATE
Thank you everyone for your solutions, they works! Now, I am doing a template for every content of and because I have much data to show but all in the same structure.
Here the index.html
<div ng-model="methods"
ng-include="'templateMethod.html'"
ng-repeat = "method in methods">
here the script.js:
function Ctrl($scope) {
$scope.methods =
[ { name: 'method1',
description: 'bla bla bla',
benefits: 'benefits of method1',
bestPractices : 'bestPractices',
example: 'example'},
{ name: 'method2',
description: 'bla bla bla',
benefits: 'benefits of method2',
bestPractices : 'bestPractices',
example: 'example'} ];
}
and here the templateMethod.html:
<table>
<tr>
<td>
<div ng-show="toShow=='{{method.name}}Field'">
<h3>{{mmethodethod.name}}</h3>
<p>
<strong>Description</strong>
{{method.description}}
</p>
<p>
<strong>Benefits</strong>
{{method.benefits}}
</p>
<p>
<strong>Best practices</strong>
{{method.bestPractices}}
</p>
<p>
<strong>Examples</strong>
{{method.example}}
</p>
</div>
</td>
<td class = "sidebar">
<ul>
<li><a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>
</ul>
</td>
</tr>
</table>
It works!
But: if I click the first button and then the second one, the content of the first button do not disappear, it appears under the content of the first button...
Problem with the repetition?
Thanks
It might be better to handle more complex logic in the controller, but in general think about the content of the directive strings as normal js:
<div ng-show="aField">Content of aField</div>
<div ng-show="bField">Content of bField</div>
<a ng-click="aField=true; bField=false">Show aField</a>
<a ng-click="aField=false; bField=true">Show bField</a>
Or use ng-show in concert with ng-hide:
<div ng-show="aField">Content of aField</div>
<div ng-hide="aField">Content of bField</div>
<a ng-click="aField=true">Show aField</a>
<a ng-click="aField=false">Show bField</a>
In the former strategy, nothing shows upon page load. In the latter, the bField content shows by default. If you have more than two items, you might do something like:
<div ng-show="toShow=='aField'">Content of aField</div>
<div ng-show="toShow=='bField'">Content of bField</div>
<div ng-show="toShow=='cField'">Content of cField</div>
<a ng-click="toShow='aField'">Show aField</a>
<a ng-click="toShow='bField'">Show bField</a>
<a ng-click="toShow='cField'">Show cField</a>
I'm guessing that you have a list of items and want to show each item content. Something an accordion component does.
Here is a plunker that shows how you could do it: http://plnkr.co/edit/UTf3dEImiDReC89vULpX?p=preview
Or if you want to display the content on the same place (something like a master detail view) you can do it like this: http://plnkr.co/edit/68DJHL582oY4ecSiiUdE?p=preview
simply use one variable which content is visible. http://jsfiddle.net/gjbw7/
<a ng-click="show='a'">Show aField</a>
.
<div ng-show="show=='a'">Content of aField</div>
I would recommend to create a service in case your fields belong to different controllers.
Service:
App.factory('StateService', function() {
return {
openPanel: ''
};
});
Injecting the service in a Controller:
App.controller('OneCtrl', function($scope, StateService) {
$scope.stateService = StateService;
});
Finally using it a view:
<a ng-click="stateService.openPanel='home'">Home</a>
<div ng-show="stateService.openPanel == 'home'">Content of Home</div>
Demo: http://jsfiddle.net/codef0rmer/BZcdu/
Try this way.
<div>{{content}}</div>
<a ng-click="content='a'">Show aField</a>
<br>
<a ng-click="content='b'">Show bField</a>
<br>
<a ng-click="content='c'">Show cField</a>
<br>
<a ng-click="content='d'">Show dField</a>
<br>
<a ng-click="content='e'">Show eField</a>
<br>
<a ng-click="content='f'">Show fField</a>
Take a look at the ng-switch directive.
<div ng-switch="aField">
<div ng-switch-when="someValue1">
HTML content that will be shown when the aField variable value is equal to someValue1
</div>
<div ng-switch-when="someValue2">
HTML content that will be shown when the aField variable value is equal to someValue2
</div>
<div ng-switch-default>
This is where the default HTML content will go (if aField value is not equal to any of the ng-switch-when values)
</div>
</div>
I have a form that I use to post Live data that is appended to the form using Jquery. The data that is appended contains an input box containing the value of the data I want the form to post. Everything works in Chrome, Firefox and IE8 but not IE7.
Why can't IE7 post live data. What am I doing wrong is there anyway to get around this???
See code below:
<!--Start Cartbox-->
<form method="get" name="register" action="process.php">
<div id="cart" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-cart">Your Devices</span> Your Products</h4>
<ul id="cartbox" class="cart ui-helper-reset ui-helper-clearfix">
<!--EXAMPLE OF LIVE DATA-->
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">product 1</h5>
<img src="product1.png" alt="product1"/>
<input type="hidden" name="devicetype[]" value="product1" />
<div class="draggableicons">
<a style="float:left" href="#" title="<b>Product 1 ($150.00)</b><br />" class="vtip ui-icon ui-icon-info">More info...</a>
Add to cart
</div>
</li>
<!--EXAMPLE OF LIVE DATA-->
</ul>
</div>
<button class="addbutton">Add the product to your cart</button>
</form>
<!--End Cartbox-->
I don't see an ending </form> tag
I also dont think jQuery plays well with '[]' in field or id/class names