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-click时都会更新的值列表。例如，它是一个整数值数组。
“ $ 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}}"。未选择该值，因为您将存储在ng-model中的int数与存储在选项属性中的字符串值进行了比较。

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

1 个答案: