javascript - 为什么 ng-selected 调用函数 n 次

Question

我尝试通过单击一个项目从选择框中调用一个函数。

HTML 标签

<div>
    <div class="col-sm-6">
    <h3><small>Organiser</small></h3>
    <input type="text" id="#tournament-organiser-name" ng-model="organiserName" class="form-control" name="organisert-name" ng-keyup="findOrganiser(organiserName)" />

    <div class="form-group btn-toolbar-bottom" ng-hide="searchResultshow" ng-model="searchResultshow">
        <select class="form-control" size="3"  name="singleSelect" height="40px" id="singleSelect" ng-model="organiserLikeList" >
          <option ng-repeat="option in organiserLikeList" ng-value="{{option.id}}" ng-selected="selectOrganiser(option)">{{option.name}}</option>
        </select>
    </div>

</div>

JS

$scope.selectOrganiser = function(x){
  console.log(x);
}

我尝试更改指令。

该参数应该是 organsierLikeList 中的一个字段。但它不起作用。

点击 :该函数不调用。

ng-selected: 函数被调用了n次(好像每次调用了两次)

有些事情对我来说很奇怪:

当我在文本字段中输入一个字母时，该函数被调用，但 ng-selected 指令位于 select-Tag 中的 option-Tag 上。

Answer 1

您不能将点击事件绑定(bind)到单个选项元素。而是订阅整个选择框的 onchange 事件:

<div class="form-group btn-toolbar-bottom" ng-hide="searchResultshow">
    <select class="form-control" size="3" name="singleSelect" height="40px" id="singleSelect" 
            ng-options="option.id as option.name for option in organiserLikeList"
            ng-change="selectOrganiser()"
            ng-model="organiserSelected">
    </select>
</div>

另外，使用 ngOptions 而不是 ngRepeat。