I have a select menu which has a list of number options.
Rooms is an array which can contain multiple room objects. Each room object contains a number for adults and children.
When a user clicks on a dropdown menu for children or adults how do I do I get the users selected option and parse that to scope function so I can update the rooms.children for that particular room property?
I'm currently using ng-click but that function doesn't even get called.
Plunkr example here
Use ng-model to bind the selected value to a scope property: http://plnkr.co/edit/vfl16rS1XyjhbesqVYDi?p=preview
You can also use ng-options instead of ng-repeat on the options, see: http://docs.angularjs.org/api/ng.directive:select
Related
I have a collection of objects that AngularJS filters by a text search within a title property on each object.
After this filter has run, I am left with a set of items that matches this filter.
I would like to iterate over this subset of the list, after clicking a button, and change a property on the items that match this filter.
Is there an easy way to do this in AngularJS, or am I going to be doing this outside Angular and then updating the state manually in the controller?
When the user clicks the button you can get this values and make some change. But I think you need do it inside your controller.
It appears that within an ng-repeat you can do the following
item in items | filter:x as results will store the fragment of the repeated items as results, but only after the items have been processed through the filter.
I have a gist demonstrating my problem here:
https://gist.run/?id=e2ccd5925e383f2fc36ad277c31bcf23
The checkbox version works fine, if you remove a check, it updates the model right, but if you change the selected radio button, it will keep the true value on the radio that got it's selection removed. If I remove the model.bind="true" value, it will write "on" instead of true. I do want true/false, and not on/off.
I want the object to get it's property updated to be a true or false depending on if it's chosen or not, dynamically. In my scenario I don't know how many radio buttons or checkboxes will need to be selected. I only know that in the cases of it not being a collection, I only want one, and in the case that it is a collection, I want an unknown number selected.
Like the other answer mentions - <input type="checkbox"> behavior is different from <input type="radio">.
I have forked your gist and made the following changes to make your scenario with the radio button work in aurelia:
1) Added a function to the first object in your params collection called selectedChanged(it doesn't have to be there, could be on the viewmodel class instead, perhaps a better place for it). It is responsible for handling selection change in the radio button group, specifically it will iterate over a collection of options (second parameter), and set selected property to true on the option who's id matches the first parameter of the function, and to false on all other options.
2) There is an event on the input called change, I delegate it to a function called selectedChanged mentioned above, passing the option.id value and options as parameters.
https://gist.run/?id=5f38414fde799dfc145fc1291d9f2fd3&sha=f12283b08bfb45e77b8280d46a3709b6ccb82768
I think what you want to achieve (turning individual value on/off) is not achievable with radio, as the way it works (select a single value out of a set) is different with check-box (turning individual value on/off) (MDN reference). So If you truly want to have radio like appearance, with check-box behavior, consider employing some CSS and extra DOM elements to make it look like so, and behave like so.
I am using ng-options to create a Select from an array of objects. This is working just fine, and for the purposes of this question, the content of the objects is somewhat unimportant, just suffice to say they have a name property, a value property, and a few other properties.
Below is the code that I'm using to create the Select, and so far it is working just fine.
Here's my question - when an option is selected, what gets bound to the ng-model is the "entire object" (fl). What I'd like to be bound to ng-model is just the "name" (i.itemName) part of the object.
I suppose I can fix this by going back after the fact, and when the submit button is pressed, I can loop through all data, find the bound object, extract the name from it and then change it so it's not bound to the name, but... that's rather sloppy and not really how it should be handled.
Is there a way to change this code so that when I select an item, ng-model is bound to i.itemName and not fl?
<select chosen
id="{{fl.fldBasic.fldLabel}}"
ng-model="fl.dataValue"
ng-readonly="{{fl.fldBasic.attrReadOnly}}"
title="{{fl.help}}"
ng-required="{{fl.required}}"
class="chosen-select"
ng-options="i.itemName for i in fl.combo_ItemList.itemList track by i.itemValue"
style="width: 100%;">
</select>
You may use the following code if you want to bound the ng-model to itemName. Do note that you need to remove track by here for it to work as it will evaluates to undefined and the model value will not match to any options.
i.itemName as i.itemName for i in fl.combo_ItemList.itemList.
I have ng-repeat with items from my scope. Each row has a checkbox. When I click on the button which is outside ng-repeat it should call function from controller and from there I need to know know which checkboxes were selected and get their original scope values. I'm able to get selected checkboxes within controller with
$("input:checkbox:checked")
but how can I access it's original scope values (for rows which were selected)?
Thank you in advance.
Never do DOM manipulation in your controller.
The better ways would be
to add items in an array within your controller on selecting, and then on button-click, process the items in the array via a controller method, or
Set a boolean property on each item to true on selection, and then on button-click, process items with that boolean property set to true.
If you give us a jsFiddle for your situation, I or somebody else can give you more details.
Here is a fiddle http://jsfiddle.net/e6NPw/1/
I have a $scope.selected object on the scope and I keep the ids as keys. After that in your function outside your ng-repeat you can pretty much do anything you want, I just make an array of objects like the $scope.results but only with the selected ones.
I have a multiple select control and I want to be able to prevent the selection of multiple items within a group. Here's the code:
<select multiple="multiple"
data-ng-model="dlgData.selItem"
data-ng-change="itemChange()"
data-ng-options="item.value as item.text group by item.group for item in dlgData.itemList">
</select>
This is a multiple select control so dlgData.selItem will potentially contain an array of selected items.
I want to limit the selection to one item per group, thus, in the change event I want to check to see if the user has added a second item from a previously selected group, i.e. check to see if dlgData.selItem contains values from the same group,
Question: How do I determine the item that caused the change event?
For single select dropdowns I would just check the model but in this case the model (dlgData.selItem) contains all items that have been selected so I don't know which item was the last to be added (which is the one I want to remove).
Initially I was using a Directive - but had the same problem.
Thanks.