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
Related
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.
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.
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/
Given a select element that I can add a directive to:
<select ng-options="..." mydirective></select>
How can I, in my directive, access the ng-options as an object/array? I would like to make a drop down alternative by reading the select and hiding/replacing it.
Select2 for AngularJS is such a implementation, you could study that to find one approach on how to do it.
See source here:
https://github.com/angular-ui/ui-select2/blob/master/src/select2.js
What it does is search for the ng-options attribute on 'elem', get the name for the object on scope from the attribute and then set a $watch on that object to get the data. From there you can do basically do whatever you want.
ng-options requires the select element, so you cannot replace that and still use ng-options. That means you will have to add your directive as a attribute. Furthermore, it also means you have to consider the priority of your directive, depending on what you want to do with the data. Should it run before ng-options or after for instance?
Source for ng-options, which can be a useful study, can be found here:
https://github.com/angular/angular.js/blob/6609e3da76dd898cfe85f75f23ab2e39fee65fe5/src/ng/directive/select.js#L4
All this considered, if you won't be using any of the functionality of 'select' or 'ng-options', they might end up being in the way (seeing as it creates a <select> element, and <option> children elements) . Creating your own 'my-options' directive could be a better approach.
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.