如何在具有动态数据的html标签中强制选择值

Question

I'm trying to force a selected value of a select field using AngularJS

To provide a little bit more of background, im using AngularJS.

My code would look like that:

<select class="form-control" name="SOExample" 
    ng-model="$ctrl.variableValue"
    ng-change="$ctrl.functionThatControlsValidations()"
    ng-click="$ctrl.updateListOfValues()">

    <option ng-repeat="value in $ctrl.listOfValues" value="{{value}}">
        {{value}}
    </option>
</select>

So to explain a little bit:

• "$ctrl.listOfValues" is the list of values that is updated each time a ng-click is triggered. For instance, it's an array of integer values.
• "$ctrl.variableValue" holds the value of the desired value to be initially selected from the "$ctrl.listOfValues" and it's always the same except when the value selected in the field is changed and then it is updated to that new value.
• "$ctrl.updateListOfValues()" simply updates the list of values.

My JS code would look like this:

function ExampleController(...){
    this.$onInit = function() {
        this.variableValue = 16;
        this.listOfValues = [];
        this.listOfValues.push(this.variableValue);
    }

    this.updateListOfValues = function(){
        this.listOfValues = [];
        this.addElementsToListOfValues(); //Value of "this.varibleValue" will always be in the array of values
    }
}

The problem comes when i want the value of "variableValue" to be the one selected in the field. If the "listOfValues" is empty no value will be shown at the beginning. So to solve it at the $onInit i forced the varibleValue on the list.

Then when I click on the select field and it refreshes the "listOfValues" the values that is selected will change to the first element of the refreshed list, but i want it to be still, the value of variableValue, until the user select another one, if it does.

Answer 1

I'm not sure if it exactly what you wanted, but I designed a plunker example for you

<select ng-model="$ctrl.variableValue"
        ng-change="$ctrl.functionThatControlsValidations()"
        ng-click="$ctrl.updateListOfValues()">

    <option ng-repeat="value in $ctrl.listOfValues" ng-value="value">
        {{value}}
    </option>
</select>

The point is to use ng-value="value" instead of value="{{value}}" . The value is not being selected because you compare int number, stored in ng-model with string value, stored in option attribute.