I Have below ngFor I want to remove first four character of c.FilmCode
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle}}</li>
</ul>
</div>
</li>
Below is ts code
showmoviecombo(CinemaId) {
this.common.createAPIService('api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId, '').subscribe((result: any) => {
this.movies = result;
//this.movieids = this.movies.FilmCode;
console.log(this.movieids);
});
}
Is there any way to do it?
You can also use Slice for removing the first four character
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle.slice(4)}}</li>
</ul>
</div>
You can use substring on your string value method
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle?.substring(4)}}</li>
</ul>
</div>
</li>
Related
So I have this HTML website that has code like this:
<ul class="WCVH WKVH" role="list">
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.POSTED_DATE--uid6-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.POSTED_DATE--uid6">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="b7e15031a749444a855366b1f1a87a46" data-automation-id="menuItem" aria-label="Posted Today, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WKQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="POSTED_DATE_charm" alt="" aria-label=""
aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Posted Today" aria-label="Posted Today" data-automation-label="Posted Today" aria-labelledby="labeledImage.POSTED_DATE--uid6-formLabel">Posted Today</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_TYPE--uid7-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_TYPE--uid7">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="5c6eda594d0d46609fa4c8e2ff13e731" data-automation-id="menuItem" aria-label="Full time, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WCQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_TYPE_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Full time" aria-label="Full time" data-automation-label="Full time" aria-labelledby="labeledImage.JOB_TYPE--uid7-formLabel">Full time</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_REQ--uid8-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_REQ--uid8">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="cc054d6cca664a3282855669711520d5" data-automation-id="menuItem" aria-label="T_R_1616417, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WBQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_REQ_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="T_R_1616417" aria-label="T_R_1616417" data-automation-label="T_R_1616417" aria-labelledby="labeledImage.JOB_REQ--uid8-formLabel">T_R_1616417</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I need to get the specific Requisition ID: T_R_1616417 but I got error that they cannot find the ID in the div element tag.
Error Code
`An unhandled exception of type 'WatiN.Core.Exceptions.ElementNotFoundException' occurred in WatiN.Core.dll
Additional information: Could not find DIV element tag matching criteria: Attribute 'id' equals 'labeledImage.JOB_REQ--uid8' at https://hpe.wd5.myworkdayjobs.com/en-US/Jobsathpe/job/BEP01---Embassy-Prime-BEP01/AMS-Profiling-Data-Specialist_1000713
`
Here's my code in C# in grabbing the specific item:
reqID = browser.Div(Find.ById("labeledImage.JOB_REQ--uid8")).OuterText.ToString();
How can i get the correct value "T_R_1616417" in this line of html code in C# format?
I found input value in element such as:
alert($(ui.item).find('input').val());
How can I get next li element after ui.item and find input value for it?
I tried it:
alert($(ui.item).next("li").find('input').val());
Html part:
<ul id="sortable" class="ui-sortable" style="list-style-type: none;">
<li class="ui-sortable-handle" style="">
<div id="row_attr_118_8">
<input id="attr_118_8" class="input sortInp" name="attr_118_8" value="741"
type="text">
</div>
</li>
<li class="ui-sortable-handle">
<div id="row_attr_40_8">
<input id="attr_40_8" class="input sortInp" name="attr_40_8" value="188" type="text">
</div>
</li>
<li class="ui-sortable-handle">
<li class="ui-sortable-handle">
</ul>
But it doesn't work. How can I solve this problem? Thanks.
I think you should do this:
var value = $(".ui-sortable").children("li").eq(0).find('input').val();
This selects the first li, but you can change the index in the eq to select the item you want
When "reply" link is clicked it open all the input tags associated with ng-show. How can I change it to just open the adjacent input tag of "reply" link? Example as in Facebook when a reply is clicked it open only the adjacent input tag. The number of blockquote is infinite as data is going to come from backend. so how can we dynamically manage the blockquote?
angular.module("myDiscuss", [])
.controller("TabController", function() {
this.tab = 0;
this.subTab = 0;
this.like = 0;
this.selectLike = function(setTab) {
this.like = setTab;
};
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.selectSubTab = function(setTab) {
this.subTab = setTab;
};
this.isSelected = (function(checkTab) {
return this.tab === checkTab;
});
this.isSelectedSub = (function(checkTab) {
return this.subTab === checkTab;
});
this.isSelectedLike = (function(checkTab) {
return this.like === checkTab;
});
});
<div class="thumbnail" style="border-radius: 0px;" ng-controller="TabController as tabs">
<ul class="nav nav-pills">
<li role="presentation" ng-class="{ active:like === 1 }">
<a href ng-click="tabs.selectLike(1)" class="glyphicon glyphicon-thumbs-up">Helpful</a>
</li>
<li ng-class="{ active:tab === 2 }">
<a href ng-click="tabs.selectTab(2)" class="glyphicon">Comment</a>
</li>
</ul>
<div class="panel" ng-show="tabs.isSelected(2)">
<blockquote>
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<div style="overflow: hidden;">
<h4>Name</h4>
<p>.......</p>
</div>
<div ng-show="tabs.isSelectedSub(3)">
<small>....</small>
</div>
<ul class="nav nav-pills">
<li ng-class="{ active:subTab === 3 }">
<a href ng-click="tabs.selectSubTab(3)" class="glyphicon ">Helpful</a>
</li>
<li ng-class="{ active:subTab === 4}">
<a href ng-click="tabs.selectSubTab(4)" class="glyphicon">Reply</a>
</li>
</ul>
<div style="overflow:hidden" ng-show="tabs.isSelectedSub(4)">
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<input class="col-sm-8 col-md-8 col-lg-11" type="text">
</div>
</blockquote>
<blockquote>
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<div style="overflow: hidden;">
<h4>Name</h4>
<p>.......</p>
</div>
<div ng-show="tabs.isSelectedSub(3)">
<small>....</small>
</div>
<ul class="nav nav-pills">
<li ng-class="{ active:subTab === 3 }">
<a href ng-click="tabs.selectSubTab(3)" class="glyphicon ">Helpful</a>
</li>
<li ng-class="{ active:subTab === 4}">
<a href ng-click="tabs.selectSubTab(4)" class="glyphicon">Reply</a>
</li>
</ul>
<div style="overflow:hidden" ng-show="tabs.isSelectedSub(4)">
<img src="../images/cover.jpg" class="img-reponsive pull-left">
<input class="col-sm-8 col-md-8 col-lg-11" type="text">
</div>
</blockquote>
</div>
Image when "reply" link is clicked:
This problem is screaming for a directive for two reasons. 1) Reusable component 2) Provide isolate scopes which will help contain each of those replies. The isolate scopes will make it much easier to keep each component self-contained.
I have this code I am trying to implement that calls a function
<body>
<nav id="menu">
<div id="app">
<ul class="List">
<li><span>Enter Number below</span></li>
<div id="coachid">
<input type="text" name="coachid" id="textbox1" value="22984">
</div>
<li><span>Fitness Programs</span>
<ul id="programs">
<li class="Label"> </li>
<li><span>10-Minute Trainer</span>
<ul id="10min">
<li class="Label"> </li>
<li><span>Base</span>
<ul id="10minBase">
<li class="Label"> </li>
<label for="basic">Text Input:</label>
<input type="hidden" name="basic" id="basic" value="10MinTrainer"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="10min">
<li class="Label"> </li>
<input type="hidden" name="basic1" id="basic1" value="TMT"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="Deluxe">
<li class="Label"> </li><input type="hidden" name="basic3" id="basic3" value="TMTUpgrade"/>
<button id="getWebSite">Open Website</button><br/>
<ul>
</li>
</ul>
</li>
</li>
<ul>
</li>
</ul>
</div>
</nav>
</body>
and here is the function
$(function() {
$('#getWebSite').unbind().click(function(){
goUrl = 'http://www.example.com/' + $("#basic").val() + '?referringRepId=' + $("#textbox1").val();
window.location = goUrl;
});
});
I am trying to call the function multiple times throughout the code to redirect the button to a site based on info held within the html. Is this possible?
You need to name your function, apply a class to those elements that should have the click handler, and create the click function:
<button class="myClass">
$(function () {
function doSomething() {
goUrl = 'http://www.example.com/'
+ $("#basic").val()
+ '?referringRepId='
+ $("#textbox1").val();
window.location = goUrl;
}
$('.myClass').unbind().click(function () {
doSomething();
});
});
Ok, the issue here is pretty simple but i just can't think how to solve it.
I need to create a table with 5 lines and 5 columns with a sequential numbers [1..25] with checkboxes inside each column/row. Each checkbox has it value (between 1 and 25)
I wrote a code to generate the image above, just looping columns, but writing every row separately
<div class="row">
<div class="col" ng-repeat="n in [1, 5] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [6, 10] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [11, 15] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [16, 20] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [21, 25] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
Is there a way to write this code in 2 loops only? I was thinking in something like the code below, but obviously doesn't work.
<div class="row" ng-repeat="n in [1, 4] | makeRange">
<div class="col" ng-repeat="p in [1, 4] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="p" value="{{n}}">
</label>
{{p * n}}
</li>
</ul>
</div>
</div>
The solution doesn't have to be in angular, but if it be will be much appreciated ! :)
Thanks!
Not sure where you got the "makeRange" directive, certainly not a default ng one.
All you need to do to make this work is to create a function on your controller to calculate your n and p values.
So, your HTML should look like this:
<div ng-app='myApp' ng-controller="Main">
<div class="row" ng-repeat="n in range(0,4)">
<div class="col" ng-repeat="p in range(1,5)">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="p" value="{{n}}">
</label>
{{n*5+p}}
</li>
</ul>
</div>
</div>
And your JS like this:
var myApp = angular.module('myApp', []);
function Main($scope){
$scope.range = function(min, max){
var input = [];
for (var i=min; i<=max; i++) input.push(i);
return input;
};
};
Sample here on Fiddler: http://jsfiddle.net/sqren/ZBrJB/
I would just create the array in plain javascript and then use ng-repeat on that array from the scope. I did this in nested rows but could do it all in one array and use css to adjust positioning
Controller:
app.controller('MainCtrl', function($scope) {
var ctr=0;
$scope.rows = [];
for (var i = 0; i < 5; i++) {
var row = [];
for (var j = 0; j < 5; j++) {
ctr++;
row.push({val: ctr})
}
$scope.rows.push(row);
}
});
Markup:
<div ng-repeat="row in rows" class="row">
<ul class="list">
<li class="item item-checkbox" ng-repeat="item in row">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" />{{item.val}}
</label>
</li>
</ul>
</div>
DEMO