selecting particular item in dropdownlist in angularjs - javascript

I want to select particular item in dropdownlist with angularjs i used this code but it is not working
<select class="form-control" ng-model="primaryObjectId" ng-change="getPrimaryObjectColumns()">
<option value="{{object.id}}" ng-repeat="object in objectList">{{object.name}}</option>
</select>
in controller.js
$scope.primaryObjectId = "3";
but is selecting first item in list i want to select 3rd item from list

You need to use ng-options with ng-model.
In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the 's model is assigned via the select as part of the comprehension expression.
<select ng-options="items for items in objectList" ng-model="primaryObjectId"></select>
See example
See this example to get items based on value of option item.
Set drop down item based on id. See example

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-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.

Check options in select in Angular

In my Angular app, I have 2 select inputs as follows.
<select ng-model="selectedItem.name" ng-options="item.name for item in items" />
<select ng-model="selectedSubItem.name" ng-options="subItem.name for subItem in selectedItem" />
The options in the second select is dependent upon the option selected in the first select. Once the form is submitted, the id's from selectedItem and selctedSubItem are extracted and submitted to the API. This works perfectly for creating a new record.
While retrieving an existing record, the API returns the id's of selectedItem and selectedSubItem. I use resolve in my app.js to populate the available options in both the selects.
I'm a bit confused on how to reuse the same view to check the options in both selects based on the id's retrieved from the API in the same view.
If I understand correctly, after your route resolves on the update view you have:
selectedItem.id
selectedSubItem.id
items collection
...and each item has a nested collection of subItems.
First, you need to loop through each item in your items collection until you find the one that matches selectedItem.id. Then, you need to loop through each of that item's subItems until you find the one that matches selectedSubItem.id.
If you're using Underscore.js, the findWhere method works great for this. I'm sure lodash has something similar.
Does that answer your question?

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

Categories

Resources