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

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.

Related

How to make use ngModel.NgModelController's properties $touched within the controller?

In fact, I want to ask how to make use ngModel.NgModelController's method and properties within the controller, and it will be perfect if there is more explaination about the usage of ngModel.NgModelController instead of giving the link of the api to me? What I have faced, is I want to set something like the following works within my controller. More precisely, I want to make the option with "--- please fill in ---" 's text to disappear once the droplist is clicked, but I want to do the operation at the controller instead of like the example below. To split off my question, there are several pieces I am interested in:
How do I set up the object used for the form (as I am doing a form) at both the controller and the HTML template
How do I set up the corresponding objects to each of the form field, like the select field below in both the controller and the HTML template
What else should I know to solve the question?
<select name="dropdown"
ng-model="$ctrl.value"
ng-options="o.id as (o.state) for o in $ctrl.form.stateCode.options">
<option ng-if="!form.dropdown.$touched" value=""> --- please fill in --- </option>
</select>
P.S. I don't know whether because I am using requireJS together with angular, so the $ctrl may actually representing the scope of the controller.
In angular when you are using forms it is more recommended that you should use form tag with a name attribute so that angular binds that form to the current controller scope.
and after that when you are using input with in that form then the input that are using ng-model directive, that input controller will be bind to the formcontroller. Here I am attaching a fiddle http://jsfiddle.net/WdVDh/79/
$ctrl is not same as $scope. When we are using controller as syntax, then angular binds the $ctrl property to the $scope
For more info on this you should go for https://docs.angularjs.org/guide/forms

ng-model scope not available while using with ng-options

I am just trying to implement a simple drop down and here is my code
<select ng-change="selectTestSuite();" ng-model="testCase" ng-options="testSuite.TEST_NAME for testSuite in publicTestCase"></select>
In the controller when I am trying to print value of testCase in console it is giving undefined. But When I try to print id of testCase using
{{testCase.TEST_ID}}
It is giving me id. I have also checked by using $watch
$scope.$watch('testCase',function() {
console.log($scope.testCase);
});
Unable to figure out where I am making mistake.Appreciate any help.
I think no problem with ng-options.
Actually ng-options maps the "testSuite.TEST_NAME" as model to ng-model.
Ensure the "testSuite.TEST_NAME" is available in "publicTestCase" collection (Whether it is undefined).
You are binding the testCase to testSuite.TEST_NAME.
Your ng-options should look like this:
<select ng-change="selectTestSuite()" ng-model="testCase" ng-options="testSuite as testSuite.TEST_NAME for testSuite in publicTestCase"></select>
The model gets bind to the value of testSuite from the records in the publicTestCase array and for each of the testSuite you want the testSuite.TEST_NAME to be shown as the options text.
enter image description here
Note:- Please find the image link.image contains code
ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

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.

AngularJS model does not update after manual change of option

I have a problem with AngularJS model. Currently I have two select tags and I fill it by some async action then I just set select tag model by received data. Everything works well but if I change select tag (option) manually then model can't be changed anymore by this async actions - script keeps model picked by me manually - I am sure that I assign proper data to model from server response, because it works untill I don't change it manually...
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
(second select looks like above).
If someone have some idea why ngModel can't be updated after manual changes, please reply :)
You must be using ng model with direct variables. When using ngmodel with html input types use object types in ng model else value does not reflect.
$scope.req={value:""};
in html use
<select data-ng-model="req.value"></select>
Weird but I fixed it - It was because 'select' was wrapped by div which had ng-controller. Controller contains actually one action with change select option. After remove this ng-change it didn't help but removing whole controller declaration did..
<div ng-controller="sController">
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
</div>
Someone can explain me this anomaly ? ;/ Model always was changed in main/common controller (parent) where also was initially created.
http://jsfiddle.net/nkr33bo0/

Broken ngModel on Radio buttons with an ngRepeat

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

Categories

Resources