Как заставить выбранное значение в теге select html с динамическими данными

Question

Я пытаюсь принудительно выбрать выбранное значение поля выбора, используя AngularJS

Чтобы обеспечить немного больше фона, я использую AngularJS.

Мой код будет выглядеть так:

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

Итак, немного поясним:

• "$ ctrl.listOfValues" - это список значений, который обновляется каждый раз при нажатии ng-клика.Например, это массив целочисленных значений.
• «$ ctrl.variableValue» содержит значение желаемого значения, которое будет изначально выбрано из «$ ctrl.listOfValues», и оно всегда одинаково, за исключением случаев, когда значениевыбранный в поле изменяется, а затем он обновляется до этого нового значения.
• "$ ctrl.updateListOfValues ​​()" просто обновляет список значений.

Мой код JS будетвыглядят так:

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

Проблема возникает, когда я хочу, чтобы значение «variableValue» было тем, которое выбрано в поле.Если "listOfValues" пусто, никакое значение не будет отображаться в начале.Таким образом, чтобы решить это в $ onInit, я принудительно указал varibleValue в списке.

Затем, когда я нажимаю на поле выбора, и он обновляет «listOfValues», выбранные значения изменятся на первый элементобновленный список, , но я хочу, чтобы оно оставалось неизменным, значение variableValue, пока пользователь не выберет другой, если он это сделает.

Answer 1

Я не уверен, что это именно то, что вы хотели, но я разработал для вас пример plunker

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

Смысл в том, чтобы использовать ng-value="value" вместо value="{{value}}".Значение не выбирается, потому что вы сравниваете число int, сохраненное в ng-модели, со строковым значением, хранящимся в атрибуте option.