I am using AngularJS to develop an application. Below is my requirement is like:
User should have search screen to search batch information
once the result is loading, user is click on one of the batch
after opening a batch
When user click on Cancel batch, previous search screen should be open
I am using model dialogue to load search screen and also to display batch information. I am using model dialogue because in my batch information screen, lot of information is available.
This approach is suggested by the client. Please help me how to achieve this approach.
I think angular-ui helps you to manipulate with modal dialogues.
1)
Search: <input ng-model="query">
<ul>
<li ng-repeat="object in OBJECTS| filter:query">
{{object .name}}
</li>
</ul>
where OBJECTS iterable model in scope
this will show filtered li's
rest of your questions are not clear
Related
I'm writing a small application to go on to twitter.com select the login button and then enter username and password.
I've been able to inspect the log in button and copy the XPath from chrome but I've been unsuccessful in create my own XPath from the information given. The XPath used when copied does work but it doesn't look tidy in my code therefore I'm keen to write my own.
WebDriver driver = new ChromeDriver();
driver.get("http://www.twitter.com");
driver.findElement(By.xpath("//*[#id=\"react-root\"]/div/div/div/main/div/div/div[1]/div[1]/div/div[3]/a[2]/div")).click();
Below is what is given when I inspect the log in button.
<div dir="auto" class="css-901oao r-1awozwy r-13gxpu9 r-6koalj r-18u37iz r-16y2uox r-1qd0xha r-a023e6 r-b88u0q r-1777fci r-ad9z0x r-dnmrzs r-bcqeeo r-q4m81j r-qvutc0">
<span class="css-901oao css-16my406 css-bfa6kz r-poiln3 r-bcqeeo r-qvutc0">
<span class="css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0">Log in</span>
</span>
</div>
You can identify the login button based on his parent unique attributes.
Then using the xpath axe /descendant, to selects all the descendants (children, grandchildren, etc.) of the current node, you can navigate down to the span that has the text Log in
driver.findElement(By.xpath("//a[#data-testid='loginButton']/descendant::span[text()='Log in']")).click();
Or
driver.findElement(By.xpath("//a[#href='/login']/descendant::span[text()='Log in']")).click();
If you want to study the xpath/css selector have a look here: https://devhints.io/xpath
I'm not sure what answer you are looking for so here are several possibilities:
Just give me the codez!
A: Try //a[#data-testid='loginButton']
How do I read the source of a page so that I can craft proper XPath?
A: That comes from experience. As a start, open your devtools and hover around with your mouse to see what element highlights what on the page. Read carefully through the attributes.
Where do I learn proper XPath?
A: Search on the Internet for some tutorials. Personally I started with this one, and then build up from there.
My web-app is written by AngularJs+ ui-router.
The web-app contains many forms (the number of forms are vary, depending on the application the user is applying). Each form has a ui-route state, so our users can go to each form and fill the information.
Before users submit the application we would like to implement a "summary/review" state(page) that contains all the forms the user filled, so users can review (and print) all the information from one page. Is there any way I can use the same form template (templateUrl) for the summary page?
I was thinking to use ng-include and programmatically(ng-repeat) list out all the selected forms, but it seems doesn't work.
PS: my form template might use different controller..
OK, I figured this out.
For ng-include: we need to use
<ng-include src="'formPath'"></ng-include>
For putting the ng-include in a repeater:
<div ng-repeat="f in vm.thisApp.RequiredForms">
<ng-include src="f.FormPath"></ng-include>
</div>
I hope this helps anyone who needs the answer.
I am working on AngularJs components and I am having following requirement.
I have list of Person and I want to show them in <ul> <li> and it when someone popover it it should show one popover with details of that person like FullName, Profile Picture, Job Role etc
How can I do this?
I am a newbie at the MEAN stack. I have a full app working and have searched extensively on how to solve the following problem but I'm realizing that I don't know how to "ask" the question to be sent to the proper resource.
I have a marketplace. In the dashboard, a user can enter details about their product (a boat) and it is sent to the DB. In my marketplace, I'm retrieving all of the boats from the DB and theyre styled and listed on the page.
I want a user to click on one of the tiles components that I have created with an ng-list (boat) and be sent to a new page with a fully-expanded view of that specific boat. (larger pictures, expanded details, etc.) basically all the details about the product that won't fit in the minimalistic tile component in the marketplace.
How do I pass data about that specific boat that the user clicks on and be sent to a new page? Is this an ng-directive? an API/route thing?
I just am unsure how to reference the specific boat from the list i'm retrieving and have the user sent to a new details page. Any direction or resources that will teach me to solve this problem?
In general, use ng-repeat to display a list of products and ng-click to handle clicks.
<a ng-repeat="product in productList" ng-click="goto($index)">
<h2> {{product.title}}</h2>
<img ng-src="{{product.picture}}">
<p>{{product.description}}</p>
</a>
JS
$scope.goto = function(index) {
$location(productList[index].location);
});
Use a router such as ngRoute or ui-route to intercept the new location and load the appropriate template and controller.
I am testing out the mirror api and so far I have a sample app running nicely.
The issue I am having is that I added a menu item for the action 'SHARE' but when I try to share the timeline card created by my app to Google+ it posts an empty Google+ post. The only text in the Google+ post is #throughglass. The contents of the timeline card is some simple html (see below) which renders find on glass. I also set the speakable text which works great with the 'READ_ALOUD' menu action. What gives on the 'SHARE' action, am I missing something?
Link to Google+ post
Timeline Item html:
<article class="auto-paginate">
<section>
<p class="text-auto-size">
Hello Word.
</p>
</section>
</article>
Each application is free to choose what, from the shared timeline item, it will use as part of the share command. The Google+ Glassware appears to use the text field only when sharing a textual item and ignores the html field.
(This makes some sense. Google+ can't display the HTML formatting, so it chooses to go with the text that it knows should be good.)
When you're writing Glassware, you should make sure both the text and html (and speakableText, for that matter) fields contain the correct representation of your item.