Create mailto hyperlink using AngularJS ng-repeat - html

I'm currently printing out our user list using ng-repeat.
<div ng-repeat="User in ac.Users | filter:ac.Search | limitTo:ac.Limit"
style="{{ac.Users.indexOf(User)%2 == 0 ? 'background-color:#f2f2f2' : 'background-color:white' }};">
<span style="font-weight:600;">{{User.FullName}}</span>
<span style="font-weight:600;">{{User.EmailAddress}}</span>
</div>
I was wondering is there anyway I can create single mailto: hyperlink adding all of the users email.
Group Mail

In the controller:
var arr = $filter('filter')($scope.ac.Users, $scope.ac.Search);
arr.length = $scope.ac.limit;
var emailArr = arr.map(_ => _.MailAddress);
$scope.mailRef = "mailto:" + emailArr.join(",");
HTML
Group Mail

Related

How do I create a filter with AngularJS to show/hide certain items?

I am trying to create a filter to show and hide certain items in my list. I already have two filters set but I can't seem to get this one working. As you can see I had some help with the others but this help is no longer with me. I am running AngularJS.
So far, I have the following:
1) To show and hide prices.
<h4 class="pl_header">Hidden Prices</h4>
<ul class="price_list_filter">
<li>
<label>
<span>Show</span>
<input type="checkbox" class="faChkSqr pull-right" ng-model="filter_hi" value="Hi" ng-change="hidden_show()">
</label>
</li>
2)Added it into my body.
<tbody ng-repeat="price_level in price_levels | orderBy:propertyName:reverse | filter:filterByCategory | filter:filterByType | filter:searchSKU | filter:filterByHide"
ng-style="{ 'background-color' : (price_level.buyer) ? 'lightgray' : 'white' }">
3) My javascript.
$scope.hidden_show = function() {
$scope.UIfilterby.hide = [];
if($scope.filter_hi == false){
$scope.UIfilterby.hide.push("Hi");
}
$scope.UIfilterby.hide = $scope.UIfilterby.hide.join();
}
and
$scope.filterByHide = function(price_level){
if($scope.UIfilterby.hide){
return ($scope.UIfilterby.hide.indexOf(price_level.hidden) !== false);
}else{
return {};
}
}
I followed similar structures to the other two filters, one was filter by category and the other as by type. Maybe I need to add it to my filters.py in django? I am new to this, any help would be appreciated. Thank you.

angularjs filter firebase child and value

I'm currently trying to filter my firebase values.
I'm trying by specifying the value in my ng-repeat like so:
<div class="searchHPerson" ng-repeat="result in results | filter: {dim1:'N'}:true">
<div class="searchSingleDiv">
<h6>{{result.name}}</h6>
<img class="hUserImg" src="{{result.img}}"></img>
</div>
</div>
This works indeed, but I'd like to pass a value to the filter by my $scope, like so:
<div class="searchHPerson" ng-repeat="result in results | filter: {dim1:'{{search}}'}:true">
<div class="searchSingleDiv">
<h6>{{result.name}}</h6>
<img class="hUserImg" src="{{result.img}}"></img>
</div>
</div>
... Doesn't work. This is my js code:
$scope.showResults = function() {
totalQuery = day + week;
totalValue = time1 + time2 + time3 + time4;
$scope.search = totalValue;
var Rref = firebase.database().ref().child('Users');
$scope.search = totalValue;
$scope.results = $firebaseArray(Rref);
}
My question
How can I pass a search value from my js to my ng-repeat filter?
Thank you in advance,
Have a good day/evening/night!

Getting attribute of element in XPath

I want to learn web-scraping. Therefore, I started practicing. I am trying to get data-ad-id from HTML using XPath.
HTML structure like this:
<body id="z1234">
<div class="viewport">
<div class="g-row">
<div class="g-col-9">
<div class="cBox cBox--content cBox--resultList">
<div class="cBox-body cBox-body--resultitem dealerAd rbt-reg rbt-no-top"><a class="link--muted no--text--decoration result-item" href="url" data-ad-id="248059713"></a>
</div>
</div>
</div>
</div>
</body>
XPath for <a class="link--muted no--text--decoration result item" > is //*[#id="z1234"]/div[3]/div[4]/div[2]/div[1]/div[11]/a. If I choose different car, only last div changes.
According to this I write C# code:
var url = "https://suchen.mobile.de/fahrzeuge/search.html?damageUnrepaired=NO_DAMAGE_UNREPAIRED&isSearchRequest=true&maxPowerAsArray=KW&maxPrice=10000&minPowerAsArray=KW&minPrice=10000&scopeId=C";
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
StreamReader sr = new StreamReader(response.GetResponseStream());
string sourceCode = sr.ReadToEnd();
HtmlAgilityPack.HtmlDocument document = new HtmlAgilityPack.HtmlDocument();
document.LoadHtml(sourceCode);
var rows = document.DocumentNode.SelectNodes("//*[#id='z1234']/div[3]/div[4]/div[2]/div[1]/div[11]");
foreach (var row in rows)
{
var id = row.SelectSingleNode("a[#data-ad-id]").InnerText;
Console.WriteLine("id:" + id);
}
}
I cannot get anything from this Node. It is null. How can I get data-ad-id?
EDIT
I change my C# code:
var rows = document.DocumentNode.SelectNodes("//a[#data-ad-id]")[0];
var id = rows.Attributes["data-ad-id"].Value;
Now I can get data-ad-id.
As per the code of the site, I could sense that you have no innertext for that "A" tag. It just contains DIV and IMG tags.
You will need to fetch data-ad-id using
//a[#data-ad-id]/#data-ad-id

unable to select a table within div using html agility pack

image of div tree
I am trying to scrape data from a table in a web page using htmlagilitypack.
Below is the html portion
<div id="table-matches" style="display: block;"><table class=" table-main"><colgroup><col width="50"><col width="*"><col width="50"><col width="50"><col width="50"><col width="50"><col width="50"></colgroup><tbody><tr class="dark center" xtid="28575"><th class="first2 tl" colspan="3"><a class="bfl" href="/hockey/usa/"><span class="ficon f-200"> </span>USA</a><span class="bflp">»</span>ECHL</th><th>1</th><th>X</th><th>2</th><th xparam="Number of available bookmakers odds~2">B's</th></tr><tr class="odd deactivate" xeid="pn36Jn1f"><td class="table-time datet t1496703900-1-1-0-0 ">04:35</td><td class="name table-participant">South Carolina Stingrays - <span class="bold">Colorado Eagles</span><span class="ico-event-info" onmouseover="toolTip('Colorado Eagles wins series 4-0. 4th leg.', this, event, '4');allowHideTootip(false);delayHideTip(200);return false;" onmouseout="allowHideTootip(true);delayHideTip(200);"> </span></td><td class="center bold table-odds table-score">1:2</td><td class="odds-nowrp" xodd="1.91" xoid="E-2nrdfxv464x0x6av8v">1.91</td><td class="odds-nowrp" xodd="4.74" xoid="E-2nrdfxv498x0x0">4.74</td><td class="odds-nowrp result-ok" xodd="2.79" xoid="E-2nrdfxv464x0x6av90">2.79</td><td class="center info-value">1</td></tr><tr class="dark center" xtid="28308"><th class="first2 tl" colspan="3"><a class="bfl" href="/hockey/usa/"><span class="ficon f-200"> </span>USA</a><span class="bflp">»</span>NHL</th><th>1</th><th>X</th><th>2</th><th xparam="Number of available bookmakers odds~2">B's</th></tr><tr class="odd deactivate" xeid="EyxiHGE4"><td class="table-time datet t1496707200-1-1-0-0 ">05:30</td><td class="name table-participant"><span class="bold">Nashville Predators</span> - Pittsburgh Penguins<span class="ico-event-info" onmouseover="toolTip('Series tied 2-2. 4th leg.', this, event, '4');allowHideTootip(false);delayHideTip(200);return false;" onmouseout="allowHideTootip(true);delayHideTip(200);"> </span></td><td class="center bold table-odds table-score">4:1</td><td class="odds-nowrp result-ok" xodd="2.15" xoid="E-2ns9hxv464x0x6b2jp">2.15</td><td class="odds-nowrp" xodd="3.86" xoid="E-2ns9hxv498x0x0">3.86</td><td class="odds-nowrp" xodd="2.91" xoid="E-2ns9hxv464x0x6b2jq">2.91</td><td class="center info-value">55</td></tr></tbody></table></div>
I have been trying combination of properties to access the data within table but all i get is the initial node containing div.
Here is the code used by me
var html = #urlOddsportal;
HtmlWeb web = new HtmlWeb();
var htmlDoc = web.Load(html);
//var html = new HtmlAgilityPack.HtmlDocument();
//html.LoadHtml(new WebClient().DownloadString(urlOddsportal)); // load a string
var root = htmlDoc.DocumentNode;
var node = root.SelectSingleNode("//div[#id='table-matches']"); //this returns non null
// all of the below functions return null value
var rows = node.SelectNodes(".//tr[#class='odd deactivate']");
var table = root.SelectSingleNode("//table[#class=' table-main']");
var tablerows = node.SelectNodes(".//table/tbody/tr[1]");// [#class='odd deactivate']");
var tabletag = htmlDoc.DocumentNode.SelectNodes("//table[#class='table-main']");
Can someone tell me where i am going wrong.
Thanks
Does this return var = table ?
var table = document.DocumentNode.Descendants("table").FirstOrDefault(_ => _.HasProperty("class", " table-main")
Has property =
public static bool HasProperty(this HtmlNode node, string property, params string[] valueArray)
{
var propertyValue = node.GetAttributeValue(property, "");
var propertyValues = propertyValue.Split(' ');
return valueArray.All(c => propertyValues.Contains(c));
}
If it does work you can try it out on the other nodes returning null
I prefere to use this method as it is easier to read than xcode formulas

Angularjs : Selecting one span tag in one div selects another span tag ng-repeat

I have list of posts that gets displayed using ng-repeat. In this I have one question and multiple answers. Answers are displayed in span tag which behaves as option button. Here is the problem, if I select one answer (option button) from one question then similar numbered answer get selected in another question.
my code for html:
<div ng-repeat="post in posts" >
<form id="pollForm" ng-submit="submitPoll()">
<span class="quest"> <strong>Poll:</strong>{{post.question}}</span><br>
<div class="post-container">
<br>
<span ng-style="{'background-image':'url('+ img1 +')'}" ng-click="chgImg(1)"
class="Pollchoice--radio">
</span>
<span class="Pollchoice--text">{{post.choice1}}</span><br><br>
<span ng-style="{'background-image':'url('+ img2 +')'}" ng-click="chgImg(2)"
class="Pollchoice--radio"></span>
<span class="Pollchoice--text">{{post.choice2}}</span><br><br>
<span ng-style="{'background-image':'url('+ img3 +')'}" ng-click="chgImg(3)"
ng-show="post.choice3" class="Pollchoice--radio"></span>
<span ng-show="post.choice3" class="Pollchoice--text">{{post.choice3}}</span><br><br>
<span ng-style="{'background-image':'url('+ img4 +')'}" ng-click="chgImg(4)"
ng-show="post.choice4" class="Pollchoice--radio"></span>
<span ng-show="post.choice4" class="Pollchoice--text">{{post.choice4}}</span><br><br>
<hr/>
<div>
<button id="btn" type="submit" class="btn btn-default">Vote</button>
<span style="margin:0 0 0 20px"> 50,000 votes</span> • <span> 23 hours left</span>
</div>
<br>
</div>
<br><br><br>
</form>
</div>
javascript:
$scope.chgImg = function(varParam){
//alert(varParam);
if(varParam === 1){
$scope.img1 = "/images/chk.svg";$scope.img2 = undefined;
$scope.img3 = undefined;$scope.img4 = undefined;
}
if(varParam === 2){
$scope.img2 = "/images/chk.svg";$scope.img1 = undefined;
$scope.img3 = undefined;$scope.img4 = undefined;
}
if(varParam === 3){
$scope.img3 = "/images/chk.svg";$scope.img1 = undefined;
$scope.img2 = undefined;$scope.img4 = undefined;
}
if(varParam === 4){
$scope.img4 = "/images/chk.svg";$scope.img1 = undefined;
$scope.img2 = undefined;$scope.img3 = undefined;
}
};
Thanks in advance.
This problem happens due to there are many HTML tags that have the same id.
so you need to differentiate between every id.
for example you will add question id & answer id in order to make it unique.
OR
in your JSON data add a new property called ImageURL and set is undefiend
and in your binding
ng-style="{'background-image':'url('+{post.ImageURL}+')'}"
and in ng-click pass the object
ng-click="chkimg(post)"
and in chkimg function set the ImageURL with the value
post.ImageURL="/images/chk.svg";
IMO there are some problems with the code, you are iterating over posts array but not using post object in the param of chgImg also your ngrepeat would print as many img1, img2 img3 as many time it would iterate and hence when you set it in scope this would be ambiguous for the scope to reflect the change in any one div, solution to this would be through some index to be associated with the img1+postID something like this and then modify the method accordingly as well.
You can index each element using some index and keep incrementing that in ngrepeat, that way would make the elements unique and allow to keep and index.