I have a table made out of div tags with an ng-repeat to populate the divs from an array. I want to be able to make one of the div options an editable dropdown where the default option is a value stored from the array and the rest of the elements are loaded from another array. When a user selects an element from the drop down, the default option is then changed to whatever they selected. Does anything exist for this?
Try select2 dropdown.I have added a plunkr of the same.
https://embed.plnkr.co/umVG1tVdYJXbrKt0E70Q/
You can use angular ui-select directive
Related
I have an app where I display callback results in a table.
I'm trying to figure out how to highlight a row that I click on when I display details for that record.
I thought it might be possible using the $event method and applying a class change based on a property returned there.
Any suggestions would be great!
You could use the ngClass directive on the row to set a class depending upon the value of a scope variable. Then use ngClick on the row to set the value of that scope variable.
<tr ng-class="{'highlight':activeRow===0 }" ng-click="rowClick(0)">
I have created a fiddle here
I have created html elements on my page using ng-repeat,
My problem is I don't know how to set the value on the cost column based on the dropdown on the left. Any idea on how to do this?
I have an ng-repeat with a filter. When some items are filtered out by the filter and then they are restored after another filter change there are new DOM elements created for these items. If there was any DOM manipulation on the item it gets lost after item is hidden and restored with filter.
Is there a way to keep the DOM elements, even when item is removed by filter?
I tried using track by, but it doesn't help.
Here is a fiddle that recreates the problem.
Steps to recreate:
Click the button to apply colors to DOM elements
Type something in the filter input (for example 'ap') to hide some of the elements
Remove the filter. The restored elements lost their style.
Angualr is dynamically adding and removing those templates. By template I mean whatever tag(s) are inside your ng-repeat. There is no way to preserve that in an ng-repeat. Instead, if you want this color change to be preserved, it needs to be a part of the model you are ng-repeat ing over. Does that make sense?
Add the color directly to the template style="color: {{fruit.color}}"
See this for what I am talking about
http://jsfiddle.net/nferjvsp/1/
Im trying to create a form, first element should be a tag with a few options and each of them will dynamically bring up a different set of forms depending on what the user chooses. The idea is within the select tag there will be different categories like cars, properties etc.. first user only sees that and when chose, it will bring up a set of input fields that required for that category.
Anyone got an idea what would be the best way to do it in angular?
Using the ui.router module, you can populate a DOM element (ui-view) with an HTML template file. On selection of the dropdown, you're telling angular to go to a different "state".
Check out the following plunkr I made: http://plnkr.co/edit/jnKQOvkE4nJinEQ5zhr6?p=preview
I am trying to use the Angular UI Bootstrap Typeahead directive in a few tables. These tables could have 0 to thousands of entries in them and when I attach the typeahead directive to each <input> in my table rows, it creates a DOM element for each one!
If I inspect the DOM after the page loads, I can see hundreds of <!-- ngIf: isOpen() --> on the body of my HTML. The thing is, all of these typeaheads use the same source list to supply the typeahead with it's data, so techincally I should only need 1 typeahead element that is just re-used on each input in my tables.
Currently, I do not see a configuration attribute on the typeahead documentation that allows us to create 1 shared typeahead element. Is there any way to easily get this functionality to work without altering the angular bootstrap javascript myself or without building the typeahead directive from scratch?
EDIT
To make things even worst, I have pagination on my tables and if you change between "pages" of the tables, the directive re-creates more <!-- ngIf: isOpen() --> for every new instance of that page. Therefore, if the table starts out with 100 items per page out of 10 pages, if the user clicks on each page of the pagination at a time, they will end up with 1000 <!-- ngIf: isOpen() --> on the page.
Implement some kind of view/edit state transition on the cell that contains the typeahead directive.
Use something like an ng-if="row.isEditing" on the input with the typeahead directive. As-is, your table is going to create a DOM element for every row unless you tell it not to. When you click into the cell to edit, then change the edit mode state, and the DOM element for the typeahead will be loaded on-demand.
This plunker is (somewhat) like the approach I have in mind, but it implements a whole edit row instead: http://plnkr.co/edit/ivJQ0C
Notice in that example that the DOM element for the edit row does not exist until the condition of the ng-if is met.