Question

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

的index.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);  
}

Answer 1

对于绑定值，请使用ng-model：

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

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

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

请注意您的选项格式！（值是绑定的，而不是内容！）

完整代码：

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

}

Answer 2

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

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

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

ngModel指令绑定输入，select，textarea（或自定义表单）   使用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。

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

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

3 个答案: