Angularjs。当我将 bootstrap-select 用于 css select 输入时如何获取 ng-click 事件

Question

我有 select 选项，而我的问题是当用户 select 从下拉菜单中获取值时我需要执行 ng-click 事件，但我不能。因为 select 选项已被 bootstrap-select 更改导致默认 select 选项不能 CSS 所以我使用 bootstrap-select.

preview

代码

<select class="form-control selectpicker col-md-6 col-md-offset-3 input-question input-text v2-mod" 
           id="{{question.name}}"
           name="birthyear"
           required
           ng-model="answers.userdata[question.name]"
           ng-class="{'input-error': formValidation && questionForm.birthyear.$error.required}" >
               <option value="{{option.value}}" 
                       ng-click="next('stage5')" 
                       ng-repeat="(key, option) in question.options">
                                            {{option.label}}
               </option>
</select>

被Bootstrap-select修改后的代码：

preview

Answer 1

您可以默认使用 ng-options 和 ng-change 作为 angular 个样本，这比在 options 上设置 ng-repeat 更好。

记住：你必须在 select 元素而不是 select option

元素上设置 ng-change

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {

    $scope.data = [
        {name: "a"},
        {name: "b"},       
    ]
    
    $scope.get = function(value){
    
      console.log(value)
      
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">


    <select ng-model="form.select" ng-options="item as item.name for item in data" ng-change="get(form.select)"></select>

</div>

Answer 2

使用ng-change事件并像

一样绑定ng-model

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.changedValue = function(item) {
    console.log(item);
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="selectpicker" ng-model="item" ng-change="changedValue(item)">
  <option value="">None</option>
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
  </select>

</div>

Angularjs。当我将 bootstrap-select 用于 css select 输入时如何获取 ng-click 事件

Angularjs. How to take ng-click event when i using bootstrap-select for css select input

css

jquery

angularjs

bootstrap-select