如何在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中保存選定的選項（下拉框）

回答

相關問題