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

时间:2018-12-21 09:31:42

标签: javascript html angularjs

我正在尝试使用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的值,直到用户选择另一个为止。

1 个答案:

答案 0 :(得分:0)

我不确定它是否正是您想要的,但是我为您设计了一个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数与存储在选项属性中的字符串值进行了比较。