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?
Related
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 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 want to create in angular a page with 2 views. One, a navigation view has a list of ~1000 objects along with some options to filter them e.g.
<ul>
<li ng-repeat="object in objects| filter:query | subset:subsetOp">
{{objectname}}</a>
</li>
</ul>
The list of objects is obtained by a REST query using an Angular resource.
When the name of an object is clicked I want to main part of the page to query for additional information about the clicked object and display it.
The catch comes from the fact that I need the detail pages to have URL's that can be shared, bookmarked etc and that I don't want to have to re-query the list of objects all the time.
I can only find examples using ng-route to completely replace the page - loosing the navigation, our ui-route which seems to involve defining a list of states in javascript
I have a product page, and there is an option for a 'quick view' which opens the product description and images in a modal. I also have a 'full details' button where I would like the user to be taken to a new URL based on the item code, but also display the information from my JSON for that clicked product. This is what I have:
<a ng-click="store.selected = product" ng-href="{{store.selected.code}}.html" class="btn btn-sm">Full details</a>
Everything works great for the Modal, so I am presuming there is a problem moving onto a different page and carrying this information across? I have mocked it up in Plunker to show the problem:
Plunker here
Any help would be much appreciated.
You should consider using ng-route to switch the view to a different html file. But you can also use ng-include with a little less set up.
When the Full details link is clicked, toggle a variable that tracks whether the gallery or the details should be visible. And, construct the path to the html template you want to display:
$scope.setSelection = function(product) {
$scope.store.selected = product;
$scope.detail.show = !$scope.detail.show;
$scope.detail.source = product.code + '.html'
}
Then, use ng-include to display the template:
<div ng-if="detail.show" ng-include="detail.source">
</div>
Here is an update of your plunker: http://plnkr.co/edit/zhsY6TAjONewyInGiwUC?p=preview
Note that the template should just be a snippet of html.. you don't need to include scripts like angular again.
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