CODEWITHSUNDEEP
angularjs
user1134181
user1134181

Reputation:

How to set initial value for select element in AngularJS?

I write dependent comboboxes and faced such problem - how to set initial value? For example, I have a form for adding new records:

Controller.js:

...
$http({
     url: '/api/address/fill',
     method: 'POST'
}).success(function (data) {
     $scope.itemsForLevelOne = data
}).error(function(errorData) {
   ...
});

$scope.updateOne = function() {
    $http({
         url: '/api/address/change',
         method: "POST",
         data: {'tobId' : $scope.itemOne.id}
    }).success(function (data) {
         $scope.itemsForLevelTwo = data;
    }).error(function(errorData) {
       ...
    });
};
...

View.html:

...
<label>Level One</label>
<select class="form-control m-b"
        data-role="listview"
        data-inset="true"
        ng-options="someValue as someValue.tobName for someValue in itemsForLevelOne"
        ng-model="itemOne"
        x-ng-change="updateOne(itemOne)">
</select>

<label>Level Two</label>
<select class="form-control m-b"
        data-role="listview"
        data-inset="true"
        ng-options="someValue as someValue.tobName for someValue in itemsForLevelTwo"
        ng-model="itemTwo"
        x-ng-change="updateTwo(itemTwo)">
</select>
...

From the controller I can make call to the server- side (Play Framework in my case) and then extract data from the database and save them.

In the forms of editing and deleting records I should to set the initial values for all select elements.

How can I do it?

Upvotes: 1

Views: 835

Answers (3)

omikes
omikes

Reputation: 8513

What JB said, but remember it is IMPERATIVE that the values match between the object that you pass to the ng-model and the list values themselves; In your case:

$scope.itemOne = someValue;
$scope.itemTwo = someValue2;

someValue and someValue2 NEED to match up with a corresponding option value, or else you will end up with the dreaded empty first box.

Another solution would to add a default chooser option which instructs the user to choose an option:

...
<label>Level One</label>
<select class="form-control m-b"
        data-role="listview"
        data-inset="true"
        ng-options="someValue as someValue.tobName for someValue in itemsForLevelOne"
        ng-model="itemOne"
        x-ng-change="updateOne(itemOne)">
    <option>Please Select An Item</option>
</select>
...

This way, the person filling out the form will never select an option involuntarily. This default option, because it has no value, will disappear when a selection is made.

Upvotes: 0

Cristi Marian
Cristi Marian

Reputation: 453

You should use ng-repeat instead of ng-options

<select>
        <option ng-repeat="someValue as someValue.tobName for someValue in itemsForLevelTwo"  ng-selected="expression_to_be_evaluated"
</select>

ng-repeat with the option tag, gives you more control than ng-options.

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691865

AngularJS uses bidirectional binding. The selected option is stored in the ng-model attribute when a selection is made, and it's also read from the ng-model attribute on order to display the correct selection.

So you pick the element to select from the array of options, and initialize the variable corresponding to the ng-model of the select. For example, to have the first element selected, you do

$scope.itemOne = $scope.itemsForLevelOne[0];

Upvotes: 3

Related Questions