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

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.

Related

ng-repeat with ng-selected

I am trying to figure out how to generate list of option elements using ng-repeat, but one of them to be marked as the selected option on load.
After googling, what I found is this base, which I modified by adding the selected property to the data objects
https://plnkr.co/edit/7g4MeAQnG4PzpnrebBGc?p=preview
However, it seems that ng-selected="option.selected == true" has no effect :(
Why? I also have the more complex example here: http://jsfiddle.net/ej5fx3kr/14/ which works, although I am not sure what is the difference, or what is the model here used for (note: changing the model name from "program" to anything, it still works... so not sure what is the purpose).
Bonus points: How do I debug code in AngularJS in directives? Like experiment in debug mode line by line to actually see what are the variable values in that particular scope, what is available to use, etc...
My ultimate goal in this question, is to load list of values via ajax on page load in the controller, IF there is a routeParam in the URL, find it in the list of loaded values, and add selected attribute, then set selected=true in the generated HTML on page load, otherwise not pre-select anything in the populated select box on the page load, so this is why its important for me to understand this on the simplest example before trying to plug this in.
Thanks!
The "Angular Way" to handle this is to use ng-options instead of ng-repeat, and then simply set the model equal to the default value on controller load.
For example:
<select ng-options="option.name for option in data.availableOptions"
ng-model="selectedItem"></select>
$scope.selectedItem=$scope.data.availableOptions[2];
For a more advanced case, where your ng-model might not be the object in the array, but a single property, you can use a modified version of ng-options:
<select ng-options="option.id as option.name for option in data.availableOptions"
ng-model="selectedId"></select>
$scope.selectedId = '2';
Here is a modified version of your plunker showing these different possibilities: https://plnkr.co/edit/xzYmXf8C3WuZaelwj5hO?p=preview
Using ng-selected = true inside ng-repeat would solve this .
However be sure of the data that you call in ng-repeat.For additional debugging and experiment line by line use chrome debugger .go to source tab and set break points on the js lines that you need to debug.This will let you debug line by line by pause and play . Hope this helps.Thanks

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/

Angularjs, select option after getting object from server

The short version of what I'm doing:
I'm getting some JSON from the server to try to recreate the state of my form. Everything loads fine except for one select box that uses a function to get its display. How can I accomplish this?
The longer version:
I have a select box that looks like this:
<select name="size" ng-model="form.options.size" ng-options="form.displaySize(size) for size in form.sizes">
<option disabled value="">-- choose dimensions --</option>
</select>
This works fine with the user selecting the option, but I'm trying to figure out how to get the select box to select the right size when form.options.size is set programmatically (after receiving some json from an api call).
My "size" object looks like this: {width: (some width), length: (some length)}.
My "displaySize" function just returns a string width + "x" + length.
I understand I could manually loop through the options and select the right one, but I'm really trying to avoid that as much as possible. What are my options?
Edit:
Fiddle showing exactly what I'm doing here.
While assigning the value to the select model, the value assigned to the ng-model should have the reference in the json list given to the ng-options.
$scope.form.options.size = $scope.form.sizes[index];
http://jsfiddle.net/ptno0ew7/1/
OR
use track by option for the ng-options directive, updated the fiddle http://jsfiddle.net/fo1h1n53/1

Read select options / ng-options using angular

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.

Categories

Resources