Angularjs, select option after getting object from server - javascript

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

Related

Thymeleaf / JavaScript keep value of dynamically populated select element

I have two dropdowns (select elements). First represents categories (populated from Thymeleaf model attribute), second: items for the chosen category (it is populated based on the value of the first select using jQuery Ajax). I want to keep both values after submitting the form. For the first dropdown it is easy (th:selected with usersCategory model attribute which is added by the Spring Controller):
<select id="someCategory" name="someName">
<option th:each="category : ${categories}" th:value="${category.id}" th:selected="${category.id}==${usersCategory}" th:text="${category.longName}"></option
</select>
But the second drop down is dynamically populated, so the html is only:
<select id="someItems" name="someItemsName">
</select>
I don't know how to keep the value of the second dropdown using just Thymeleaf/JavaScript/jQuery (without cookies, additional libraries etc.). I tried using inline expressions to get model attribute, but setting the value of the second dropdown did not work this way.
I actually made it work by using the inline expressions as described in Thymeleaf docs link to access the model attribute. Just had to make sure that I set the value of select element after Ajax request and not within the inline script.

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

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.

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!

AngularJS - select - default value with server call

It is a frequent question but I don't know the answer after checking lots of blogs and stackoverflow questions.
I want to select a default value in a select box and the values of the select comes from the server ($resource). I cant set the ngModel of the select in the controller as I don't have the list yet (I only have a promise). Also I tried to configure the ngInit but no success.
Could anybody help how to set the default value of a select to first element of a list coming from server?
You can maybe do something like that :
<select ng-model="selectedValue" ng-options="o.value for o in values">
And in the return of the promise :
scope.values = response.data;
scope.selectedValue = scope.values[0];
You can hide the select input until the promise is finished and show it only after. I usually show a loader gif until all my promises are finished and only then display all the content so there are no empty zones in the page. Also, be careful to set the value of the ng-model to be identical to one of the options value.

Categories

Resources