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?
Related
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
How can I disable the drag and drop sorting for only last row of a dynamically generated table in angularjs using ng-repeat ? I am using jquery ui sortable. I want that the position of last row should be fixed at last position only. Also, the table rows are dynamically growing when user add rows while adding content to table. Thanks in advance...
If it isn't an issue for how you handle styling, than I would probably use a tfoot tag. You may be able to do this more elegantly using the angular $last command, but I can't think of how off the top of my head.
In your ngRepeat, specify that you want it to do object in objects | notLast where notLast is a custom filter that slices the array to all but the last element. Use that ngRepeat for the body. Now for the table footer, do object in objects | last with last being a filter that returns only the last element (could also be done with limitTo filter). Now just apply the JQuery sortable only to the body of the table.
This could also be done with ngIf and $last, but that seems like it would be messier.
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
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards