I am new to angular, i am having requirement like create dynamically a dropdown with 3 buttons(add,edit,delete) by clicking on a link(create drop down button). We can create a multiple dropdown by clicking on a link Add/delete button should show with dropdown by default. If click on add/delete should display edit and viceversa.
See angularjs directives https://docs.angularjs.org/guide/directive
For dynamic handling of DOM directive is the best
You can also check https://angular-ui.github.io/ for more features make with directive
Related
How to add option dynamically to a select box? suppose if there is nod
related data to be select in selectbox there should be an option to
add new option using input box.
If you are using angular-ui-bootstrap, use typeahead directive.
https://angular-ui.github.io/bootstrap/#/typeahead
No. 4 example should be helpful for you. And to add a new option, you have to code that manually. Beacuse, add a new option isn't available on select elements both in ui-bootstrap and angular material.
i like to confess that i am not very good in angular and still learning. i have to load huge data and has to show by dropdown. i would prefer if i could do the pagination at dropdown end. i am working with a custom dropdown which is good and taken from this site http://developers.dss.ucdavis.edu/angularjs-serachable-multiselect-dropdown-directive/
but the above custom multi select dropdown lack one feature for showing pagination link. so the problem is user can not show minimum data and click on other link on demand to load next set of data. just wonder anyone mind to add code in the custom directive which add pagination feature there.
so at a time i can load 20 data and click on next pagination link to load next 20 data. i have seen people already developed angular pagination directives. here is one similar link http://angularjs4u.com/pagination/top-5-angularjs-pagination-demos-2014/ hence i am new in angular so do not understand how to add custom pagination directive in another custom multi select dropdown directive.
it will be really good help if some one show me how to achieve it. thanks
With the same UI Bootstrap that they use in that blog there is a pagination directive.
Here's a Plunkr
A few key points here are:
The normal ng-repeat is set as filtered variable to allow for update of search filter along with paginated.
ng-repeat="item in filtered = (allItems | filter: ...
In the same repeat after the filter you set a "limitTo" to set pagination on the list
... ) | limitTo:limit:begin
Then you just need to follow the ui bootstrap pagination
<uib-pagination total-items="filtered.length">
I am using angular-ui-bootstrap lib in my application. I need to create custom alert with button inside firing modal window.
I have tried two options:
Redefine module angular.module("template/alert/alert.html", []) from ui-bootstrap-tpls.js. Didn't work as I didn't manage to implement a button firing popup window.
Create a custom module based on "template/alert/alert.html" one. Found myself lost in a number of controllers in order to make popup window working.
What is the best approach to achieve that?
If I understood the question, you want to add a button to the alert that will launch a modal.
Plunker Demo
The easiest approach is to simply add your button into the alert template. In the Plunker demo, I copied both the contents of the UI Bootstrap alert and modal demos. Then I copied the alert template and added it to a script tag on the page. Inside the standard alert template I added a button as follows:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
That's an incredibly basic approach, but it should be a good starting point for you. If I were doing this in production, I would add my custom templates to the template cache instead of using script tags on the page itself and I would create a custom directive for my modal button so that I could pass any relevant information from my alert to my modal instance and do away with having to hard code the ng-controller on the button itself.
Just put your alert directive inside the modal template:
http://plnkr.co/edit/XJtZWQOqFVc6svECcat0?p=preview
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
Hi I would like to customize behavior of the ui-select little bit. I use two bootstap themed ui-select controls on my page with the help of templatecaches. In the template, I wired up arrow button click event using ng-click tag. That way I can easily catch the click event on the arrow button, and in my controller I can open a popup using function, for instance:
<button ng-click = "someFunctionInTheScope()">
For instance if I have two of those ui-select elements in my view, I need to differentiate which arrow button is clicked to display the correct popup. Since I am using the same template for two ui-select controls and since theoretically I can have any number of these controls on my page, I can not easily add a parameter to the method in the template to differentiate which arrow image of which ui-select control is clicked:
<button ng-click= "someFunctionInTheScope(1)">
Because both ui-select control would be using the same template code and 1 would be passed to the controller function for both of them.
Therefore I need to find a more clever way of changing the template dynamically once and for each control.
So I thought about having something like
<button ng-click= "someFunctionInTheScope($select.id)">
but when I debug it I see that functions parameter is undefined, every time it is clicked.
Can somebody please show me how to hack this?
There is no id property on the $select object. You're best bet is to pass something through the scope of the element containing the ui-select boxes. In other words, your code needs to generate a unique identifier for each ui-select box you have. This could be the $index property of an ng-repeat block, a timestamp, or something dependent on other context.
A little more context and I can provide a more specific answer.