1

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?

Improve this question

3 Answers 3

Reset to default
3

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];
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

1 Comment

I'm not entirely sure that I agree with you here. How does it give you more control? From the angular docs: In many cases, ngRepeat can be used on <option> 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 <select>'s model is assigned via the select as part of the comprehension expression.
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.