Broken ngModel on Radio buttons with an ngRepeat - javascript

Plunk: http://plnkr.co/edit/Y4ntAj2fIIpexKjkCvlD?p=preview
I'm trying to build a form component which allows the user to create multiple instances of a certain data field, but populate them from the same set of inputs.
I'm creating a radio button for each of the items within the set, using ng-repeat then each radio button has its value set to the $index from the repeat. The radio buttons are modelled on $scope.selectedItem, which is used to point the inputs to the right item.
For some reason, however, selectedItem never changes, even though the selected state of the radio buttons do.
I tried a similar thing with static radio buttons and it worked fine, which leads me to believe that there is a problem with ng-model within ng-repeat.

You need to add ngModel for each button. Then, since each iteration of ngRepeat creates a new isolate scope, you have two ways to reference your variable in the parent controller:
change selectedItem to an object. this works because objects are passed by reference in JS, while passing a primitive like you have doesn't work with two-way binding.
add $parent.selectedItem, which references the scope variable selectedItem in the controller.
In any case, you need ngModel for each button.
First option:
<input type='radio'
name='select'
id='{{$index}}'
ng-value='$index'
ng-model='$parent.selectedItem'/>
Plunker Using $parent
Second option:
JS:
$scope.selectedItem = {id: -1};
HTML:
<input type='radio'
name='select'
id='{{$index}}'
ng-value='$index'
ng-model='selectedItem.id'/>
(as well as change anywhere else you reference selectedItem to selectedItem.id)
Plunker Using an object for selectedItem

Related

polymer select values not set

I've setup a JSbin to show an issue I'm having with a polymer select box not reflecting the model (initially), however, the model does get updated after selecting an option. Note that in my example, I'm ensuring the model is loaded after the select options are populated, however, I guess the tricky thing here is that the select box population is a nested dom-repeat (thus when module is populated, the nested dom-repeat for the 'select' must be re-populated - I'm guessing).
Here's the bin and how to test it to show the dilemma.
http://jsbin.com/xucavi/edit?html,console,output
After page loads, note there are no selections made in the 2 select boxes. Click the 'Display Values from Model' button. Note that the values show the model has values. Select 'Digital' for each of the 2 select boxes. Now click the 'Display Values from Model' button again - and note that model has been updated.
Any thoughts on how to work around this? Thanks
You need to compute the value for the selected attribute of the option elements.
Modify the outer dom-repeat to bind the actual books to the property book instead of item. Now, binding the selected attribute to a _computeSelected(item, book) function makes it possible to dynamically calculate the selected book type:
<option value='{{item.id}}' selected$='[[_computeSelected(item, book)]]'>{{item.type}}</option>
The implementation of the function itself is quite simple:
_computeSelected: function(item, book) {
return item.id === book.typeId;
}
Working example of your JS Bin:
http://jsbin.com/sodugigubo/edit?html,console,output
For a more in depth explanation, read about computed binding and attribute binding.
Warning: Be aware that Polymer dom repeat is not working for Select Option in IE.

Angular JS seemingly loses binding to ng-model when selecting drop down value manually

I have a select control that I'm populating based on a list of objects:
<select data-ng-options="obj.QuestionText for obj in jumpToList track by obj.OrderNumber" data-ng-model="questionSelectionJumpTo"
data-ng-change="questionDDLChange(questionSelectionJumpTo)" id="ddlJumpTo"></select>
In my controller, I'm setting the default value when the modal that contains the drop down list appears by setting questionSelectionJumpTo like this:
$scope.questionSelectionJumpTo = $scope.jumpToList[someIndexNumber];
This works correctly.
As long as I change the value via the controller, such as when I call a function from a button, and I set $scope.questionSelectionJumpTo, it correctly updates the drop down list to show the appropriate option.
However, when I manually change the drop down list by selecting one of the options, the controller can no longer set the selected option using $scope.questionSelectionJumpTo.
Any ideas on what might be causing this? Thanks for the assist!

need to decouple the ng-model and filter

I'm new to Angularjs and I need some help. my real situation is about the ng-model and the usage of the filter: my ng-model is linked to a scope variable, and this variable is used by a filter. As soon as the ng-model detects the change, the filter kicks in, but I need to apply the filter when user clicks on a Save button.
My filter is defined as $scope.filterFunction= function ( item ) on the controller. I tried to use a fake ng-model to take the changes on the control, but the original display on this control is empty, if I use the right ng-model then the filter kicks in automatically. Has anyone had experience on decoupling the ng-model and the filter ? Any suggestion is appreciated.

Angular conditionally enabling/disabling HTML selects

Here's an image of what I am trying to do., Plunkr link below.
I have a numeric stepper and rows of select drop-downs. The number of drop-downs are bound (ng-model) to the numeric value of the stepper.
I have two array variables in $scope, that are used for ng-repeat with the individual drop-downs.
How do I writer event listeners such that? If I select a Non NONE value in Driver 1, Channel a1 should be disabled. And Channel a1 needs to be enabled if the Driver 1 is None.
Understand this could be done in jQuery, by writing a change handler and selecting the next sibling and disable it. How do i get the same in Angular ?
fyi. I am using $index variable to create distinct ids for each of the dropdowns
ex: driver_1, channel_1 etc
JSON Dump invokes a helper method in $scope, which prints out the JSON.
The code is on Plunkr. http://plnkr.co/edit/j0ClqQ3P6LZtkgctFrRB
http://plnkr.co/edit/j0ClqQ3P6LZtkgctFrRB
You can use ng-disabled in the channel select:
ng-disabled="value['selectedDriver'] != 'None'"
Here is a demo: http://plnkr.co/UMP6XDe9bQa3y3dFHyE1

Angularjs Make drop down disabled when pressing checkbox inside ng-repeat

I'm trying to display on screen html controls using Meta-Data stored in json file.
Also I'm trying to create a state where pressing check box that will make a drop down disabled.
I was managed to achieve this for a select box with static options and a select box with dynamic options (using ng-options).
I could not achieve this when wrapping it with ng-repeat.
I have spent a lot of time making this work but in vane.
I would appreciate if someone could pin point me to the right direction.
I have created a sample code which can be found in Plunker here
From ngRepeat doc:
The ngRepeat directive instantiates a template once per item from a
collection. Each template instance gets its own scope
The trick is to add controlChecked to form and remove the ng-init. So they will be in the same scope.
<div ng-show="control.type == 'Checkbox'">
<input type="checkbox" ng-model="form.controlChecked" name="{{control.id}}"/>
</div>
<div ng-show="control.type == 'DropdownList'">
<select ng-model="control.id"
ng-disabled="!form.controlChecked"
ng-options="value.code as value.name for value in control.items"
name="{{control.id}}"
>
</select>
Demo
from http://docs.angularjs.org/api/ng.directive:ngRepeat:
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope.
so it looks like you should use the $parent scope: $parent.controlChecked.

Categories

Resources