javascript - 如何在 AngularJS 中保存所选选项(下拉框)

Question

我想将 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);  
}

Answer 1

对于绑定(bind)值，请使用ng-model:

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

对于触发事件，请使用 ng-change (调用 $scope.onChange() ):

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

并注意您的选项格式! (绑定(bind)的是值，而不是内容!)

完整代码:

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

}