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

我想将选定的颜色值从dd框保存到$ scope.color中。如何在AngularJS中保存选定的选项（下拉框）

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

来源

2016-04-15 Komal Gupta

尝试请说明您详细 –

需要我想在控制台上显示选择的颜色名称。 –

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

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

触发事件，使用ng-change（调用$范围.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); 
     } 

}

来源

2016-04-15 06:55:34 Vincent

此解决方案不起作用。需要在onChange（）中传递颜色。 ng-change =“onChange（）” –

你在'$ scope.color'中有颜色，通常......但是如果你想在你传递参数function：'ng-change =“onChange（this.value ）''然后'$ scope.onChange = function（color）' – Vincent

首先，有语法错误你的代码。

在你想采取从DOM你必须告诉角度哪个变量输入到存储。

这是通过NG-模型指令进行输入。正如在文档中给出的。

的ngModel指令结合输入，选择，文本区域（或定制的形式控制）上的范围的属性使用NgModelController，这是创建和此指令暴露。

ngModel负责：

绑定视图到模型，这是其它指令，如输入， textarea的或选择需要。提供验证行为（即需要，号码，电子邮件，网址）。

所以，如果我想利用输入我会初始化输入元素，

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

通过这一点，我已经在范围（模型）初始化变量“VAL”和我有告诉角度，无论输入输入元素将被绑定到该变量。

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

来源

2016-04-15 07:01:54 chatuur

我曾尝试过用ng-model绑定$ scope.color和ng-model =“color”。它不起作用。我想ng-change指令是我正在寻找的。 –

请检查链接，这是一个使用ng-model指令的工作示例。请提供不使用ng模型工作的代码。 – chatuur

你在这里有很多答案。只是附加上我会建议你做这样：

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

来源

2016-04-15 07:07:39

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

回答

相关问题