I have setup a plunker to demonstrate my question:
http://plnkr.co/edit/xVtli2DKzNDCU1W99gOE?p=preview
The plunker lists the people with their brief details. What I need is, when the above boxes gets clicked, the complete person's details should be displayed in the "person-list" div.
How can we achieve using Angular JS?
Thanks for reading.
Something like this plunkr? The ng-click will set the scope with the selected person.
Related
Hi I am unable to create a modal in AngularJS, also, I don't know where to start regarding modal creation implementation in angularJS. Please share your suggestions or any tutorials on how to create a modal in AngularJS. Thank you!
This is something you could do yourself. However, there are plenty of libraries that already do this.
https://pathgather.github.io/popeye/
If you want to pursue yourself then checkout Ben's article on the topic.
http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
If you want to create an custom modal or dialog box you first need to create a directive and need to control the behaviour of the popup based on an event add a handler that will open the dialog box such as
//Keep this event at the top of your hierarchy.
$scope.$on('OPEN_DIALOG_BOX',function(event,data){
event.stopPropagation();//stops the event from bubbling up the event chain.
//add a variable that will show or hide the modal dialog box.
$scope.hideDialog = true;
//use data to pass custom message to bind in your html.
$scope.message = data.message;
});
//Call this event
$scope.$emit('OPEN_DIALOG_BOX');
or
You can use angular material dialog box.
Or
Use ng-dialog as explained in this blog
FIDDLE FOR THE CODE SNIPPET
I hope this helps.
I want to bind body click event to custom directive. I have created a custom directive for drop down. My functionality is I want closed the option list when the user clicks on the body. The html code for drop down is created by using <ul> and <li> tag. I have used the directive several times on the page. but the page now became slow as the no. of usage of directive increased on the page. So i want to know how to dynamically bind and unbind body click event inside the directive. i used $document.bind('click',function(){//function body}); syntax to bind click event. Please help. Thanks in advance
Instead of using JQuery, you can use the link method to manipulate DOM elements and add listeners
See : the AngularJS doc
I hope it may help
i am a new in angular js. i have lost many times for preparing validation. many example has for total form validation. now i have to do the valid scope wise. I have shown my problem graphically below.
Here save yellow and red there are two portion, when i will click yellow save button then validation will be fire for red mark scope and when i will click red save button then validation will be fire for total page content. how can i solve this problem? can any one help me?
Plunker
http://scotch.io/tutorials/javascript/angularjs-form-validation This link has validation for angularjs in a detailed manner with demo. Try replicating this. Hope this helps.
In my AngularJS web application it is possible to create an item and save it. When the user clicks on the save button, the item is showed in the sidebar on the left.
I would like that when the item is saved, it will be highlighted for some seconds (e.g. background-color) so that the user can detect where it has been saved.
This is the button to save it.
<a class="pure-button pure-button-primary" ng-click="NewOrUpdateItem()">Save</a>
Need any other details?
any idea about this issue?
Thank you in advance.
You could use the ngAnimate module of angular. ngAnimate
see here for a working example
var module = angular.module("app", ['ngAnimate']);
....
I guess a proper answer will depend on your markup and list of items, if you could put a bin would be helpful. Anyway I have put this simple example together, maybe it could give you some ideas.
When a item is saved, $scope.saved is set to true and ngClass is used to create the highlight effect, then use $timeout to unset saved. I think a directive could be a better place for this logic.
Here is the JSBIN
I'm using angular-ui bootstrap to show modal windows. I'd like to turn this into a directive that would let me pull content from the server and display it in a modal or popover…
For example: <a a-infobox="modal" href="#/content/one">A link</a> should get the content from the href and pull it into a modal window.
I pulled together a plunkr: http://plnkr.co/edit/cwtTHjMsW0knlsq2NNtg?p=preview. The first link has the a-infobox attribute. When I click on it no dialog shows up. In the console you can see that it was called.
When I click on the second link which is called from a controller, it opens the second dialog. Then when I click the button on that modal, it disappears and the dialog from the first click is right behind it.
I'm just starting to dig into directives and am sure I'm missing something fundamental.
Thanks in advance.
I found a solution...it appears that the modal needs to be applied so angular will process it on the next digest.
A simple line: scope.$apply($rootScope.dlg); is all it took.
The plunker was updated accordingly.