将 ng-click 绑定到选项值答案

【问题标题】：binding ng-click to option values将 ng-click 绑定到选项值
【发布时间】：2015-05-20 11:43:30
【问题描述】：

您好，我希望在从给定下拉列表中选择任何内容时调用特定函数。该函数需要将所选选项的值作为参数。到目前为止，这就是我所得到的：

    <label class="control-label col-lg-3">Action Type</label>
    <div class="col-lg-9">
        <select class="form-control" id="type" >
            <option value="">Please Select</option>
            <option value="SCHEDULE" ng-click="getHtml(/*SCHEDULE*/)">
                SCHEDULE
            </option>
            <option value="HTTP" ng-click="getHtml(/*HTTP*/)" >
                HTTP
            </option>
            <option value="RMQ" ng-click="getHtml(/*RMQ*/)">
                RMQ
            </option>
            <option value="WFE" ng-click="getHtml(/*WFE*/)">
                WFE
            </option>
        </select>
    </div>

但是这似乎不起作用。有人可以帮忙吗？

方法在控制器中为：

$scope.getHtml=function(option){
        console.log("sent type is: "+type);
        var type=$('#type').val();
        //BLAH BLAH...
}

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

您应该在选择元素上使用ngChange 和ngModel 指令。

ngChange：当用户更改输入时评估给定的表达式。

例子

<select class="form-control" id="type" ng-model='type' ng-change="getHtml(type)">
    <option value="">Please Select</option>
    <option value="SCHEDULE">SCHEDULE</option>
    <option value="HTTP">HTTP</option>
    <option value="RMQ">RMQ</option>
    <option value="WFE">WFE</option>
</select>

DEMO

【讨论】：

【解决方案2】：

你需要在这里使用ng-change，

首先将模型分配给select

ng-model="modelName" modelName 是一个scope variable，其值为选择框，

第二从options中删除 ng-click="getHtml..)。

并且使用ng-change，您可以在选择框更改其值时调用具有modelName变量值的控制器函数。

<select class="form-control" id="type" ng-change="getHtml(modelName)" ng-model="modelName">
        <option value="">Please Select</option>
        <option value="SCHEDULE">
            SCHEDULE
        </option>
       .....
</select>

【讨论】：