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.
Related
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.
In my application I have created paper element using dom-repeat to create below div. I have used data binding approach to bind property value to one place.same as below eq.
<div class="card-content" on-click="changed">Number of votes <span class="votes">[[count]]</span>
on-click event I want to change value of count property only at specific div, but as per data binding rules it's getting updated all places.
Please let me know if their is any way by which I can update value at single place without modifying other place.
I have a text field that uses AngularUI's typeahead feature. It looks like this:
<input typeahead="eye for eye in autocomplete[column] | filter:$viewValue">
I'd like to force the user to select an option from the list that is generated. If they type something that is not on the list exactly as it appears, on blur (clicking outside of the text field), i'd like the value of the text field to reset to it's original value.
Is this functionality part of the typeahead directive, or will I need to extend it? I searched for about 10 minutes on google and stackoverflow, but couldn't find any relevant documentation.
Can anyone please point me in the right direction to accomplish this?
There is an attribute in the plugin to force existing values only: typeahead-editable="false". The default value is true.
Only the $modelValue is being set to empty when there is a wrong value selected, and this is actually necessary otherwise we would not be able to write anything. The $viewValue stays with the last text entered. You might be able to bind a blur event of your own to the field to reset the $viewValue?
Here is your JsFiddle with the selected value displayed: http://jsfiddle.net/ZjPWe/61/
You could also use the attribute typeahead-on-select which required a callback when a value is selected, but I am not sure it would work with typeahead-editable="false" because no value is being selected.
Showing an example will likely make more sense than trying to explain this. Please reference this http://plnkr.co/edit/ipGYEX?p=preview as it ALMOST does exactly what I need.
In the example, click Add to create a new select menu and choose an option. This should add it to the parent form. Currently I'm handling this aspect with an $emit. The core problem is that I can't find a way to assign $index to each select. I'd like to attach it to the model name in order to make each one unique. However, simply doing something like ng-model="selectNum{{$index}} causes an error when passed through attrs.ngModel. As is, the ngModel is repeated for each dropdown that's added and thus, every time the form gets overwritten. I WANT to add each select as a unique object to the form - and update that specific instance should the associated select change.
Can anyone provide some insight on how to either attach the $index or perhaps another way of updating the form?
Not a direct answer to getting the values into the form object, but here's an option similar to something I'm doing for a very similar situation:
http://plnkr.co/edit/uEHFWgRQ9fP2gpeWuE5y?p=preview
Basically storing the values within the elements of the array being repeated on, then I use that object from the model for a post to the server.
Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?
If you are making the table cells directly editable using the HTML contenteditable attribute, ng-model won't work automatically as by default it's only for form elements.
It is possible to make it work with contenteditable though. There is an working example of how to do it on the angular website at http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
ng-model is allowed wherever typical form elements exist that can use the directive (input, select and textarea)
One thing I will say about ng-model that can make it a bit tricky is that you will want to bind ng-model to a property of an object rather than just a simple scope variable. I have run into several instances where I bind $scope.foo to ng-model and use it in an input control. Then, if you clear the input field, the binding is lost and it stops updating the variable. Use something like $scope.fooObj.modelProp where fooObj is an object and it will work fine.