AngularJS：在ui-select-choices中使用Ui-select ng-click

Question

我正在尝试在选项中使用添加按钮，但问题是ng-click会触发，但选项不会被选择。

<ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;">
    <ui-select-match placeholder="...">
        <span ng-bind-html="$select.selected.name"></span>          
    </ui-select-match>
    <ui-select-choices repeat="service in data.base_services | filter: $select.search">
        <span ng-bind-html="service.name | highlight: $select.search"></span>

        <!-- HERE NOT -->
        <a href="" class="pull-right" ng-click="setnewservice()">
            <i class="glyphicon glyphicon-plus-sign"></i>
        </a>    
        <!-- ### -->

    </ui-select-choices>
</ui-select>                            


<!-- here obviously works -->
<a href="" class="pull-right" ng-click="setnewservice()">
    <i class="glyphicon glyphicon-plus-sign"></i>
</a>

我可以向该函数发送一些参数并处理这种情况，甚至在选择该项目索引的点击链接时，模型会采用正确的值， 或者像上面的工作示例一样把它拿出来...

但是如何正确处理这个问题，停止事件，选择选项而不发送对象或其某些属性，然后再做其他事情呢？

$scope.setnewservice = function ($event) {
    $event.stopPropagation();
    // ??
}

- daniel

---

我有一个类似的设置，将ng-click作为us-select-choices的属性放置可以同时选择项目并调用方法。 - Samantha Catania

Answer 1

在ui-select上使用ng-change而不是在ui-select-choices上使用ng-click。 将此更改为：

ng-click="setnewservice()

to:

ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;" ng-change="setnewservice()>

- Fergus

---

我建议使用on-select而不是ng-change，特别是如果你有一个typeahead，否则它会在每个字符输入到选择框时触发。 - dwp4ge

当然，如果您想在选择文本时使用JavaScript，那么可以这样做。但这不是@daniel所问的。ngChange指令更相关。表达式会立即评估，而JavaScript事件只在更改结束时触发。这对于ui-select-choices的工作是必需的。http://embed.plnkr.co/Ufhb0IfzrTlG3XLY2ahh/ - Fergus

Answer 2

你可以向你的 标签中添加 on-select 属性，如下所示：

on-select="setnewservice($item, $model)"

- dwp4ge