如何在AngularJS中保存选定的选项（下拉框）答案

【问题标题】：How to save selected option(dropdown box) in AngularJS如何在AngularJS中保存选定的选项（下拉框）
【发布时间】：2016-08-06 23:53:12
【问题描述】：

我想将 dd 框中选定的颜色值保存到 $scope.color 中。

索引.html：

<label class="item item-select" name="selectName">
<span class="input-label">What is your favourite colour?</span>
<select id="colorid">
    <option ng-repeat="x in colorList"{{x}}</option>
</select>
</label>

controller.js：

var colorCtrl = function($scope){
$scope.color = "";
$scope.colorList =["red","blue","yellow"];
console.info("color is "+$scope.color);  
}

【问题讨论】：

请详细说明您的需求
我想在控制台上显示选定的颜色名称。

标签： javascript angularjs html select ionic-framework

【解决方案1】：

对于绑定值，使用ng-model:

<select id="colorid" ng-model="color">...

对于触发事件，使用ng-change（调用 $scope.onChange() ）：

<select id="colorid" ng-model="color" ng-change="onChange()">...

请注意您的选项格式！（绑定的是value，而不是content！）

完整代码：

<label class="item item-select" name="selectName">
                <span class="input-label">What is your favourite colour?</span>
              <select id="colorid" ng-model="color" ng-change="onChange()">
                <option ng-repeat="x in colorList" value="{{x}}">{{x}}</option>
              </select>
            </label>

还有 JS：

var colorCtrl = function($scope)
{
        $scope.color = "";
        $scope.colorList =["red","blue","yellow"

          ];
        $scope.onChange = function()
        {
            //trigerred on color change
             console.info("color is "+$scope.color);  
        }

}

【讨论】：

此解决方案不起作用。需要在 onChange() 中传递颜色。 ng-change = "onChange()"
你有颜色在̀$scope.color，通常......但如果你想在你的函数中传递参数：ng-change="onChange(this.value)"然后$scope.onChange = function(color)

【解决方案2】：

首先，您的代码中存在语法错误。

如果你想从 DOM 中获取输入，你必须告诉 angular 将输入存储在哪个变量中。

这是通过 ng-model 指令完成的。如文档中所述。

ngModel 指令绑定输入、选择、文本区域（或自定义表单 control) 到使用 NgModelController 的作用域上的一个属性，它是由该指令创建和公开。

ngModel 负责：

将视图绑定到模型中，其中输入等其他指令， textarea 或选择要求。提供验证行为（即必填，号码，电子邮件，网址）。

所以，如果我想接受输入，我会将输入元素初始化为，

<input type="text" ng-model="val" />

通过这个，我在作用域（模型）上初始化了一个变量“val”，并且我告诉 angular，输入元素中的任何输入都将绑定到该变量。

<label class="item item-select" name="selectName">
      <span class="input-label">What is your favourite colour?</span>
          <select id="colorid" ng-model="color">
            <option ng-repeat="x in colorList">{{x}}</option>
          </select>
</label>

请检查此example。

【讨论】：

我曾尝试使用 ng-model 将 $scope.color 与 ng-model ="color" 绑定。它不起作用。我想 ng-change 指令就是我想要的。
请检查链接，这是一个使用 ng-model 指令的工作示例。并且请提供代码在它不工作的地方使用 ng-model。

【解决方案3】：

你已经在这里得到了很多答案。只是为了补充，我建议你这样做：

<select style="background:{{color}}" ng-model='color' ng-options='color as color for color in colorList' ng-change='selectionChanged(color)'>
</select>

或者你也可以试试

 <select  ng-model='color'  ng-change='selectionChanged(color)'>
<options style="background:{{color}}" ng-repeat="color as color for color in colorList" value={{color}}>
{{color}}</options>
    </select>

【讨论】：