【问题标题】:Angularjs ui-select dropdown on-select function call issueAngularjs ui-select下拉选择函数调用问题
【发布时间】:2020-07-14 15:47:52
【问题描述】:

在我的 AngularJS 项目中,我使用正常的选择下拉菜单并使用 ng-change 进行函数调用,效果很好。现在我想将相同的下拉列表迁移到 ui-select。但是 on-select 函数调用不起作用,我尝试了不同的方法但没有运气。请找到我的plnkr

以下是我尝试使用 ui-select 的两种方式:

<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <ui-select-match placeholder="Select a customer..">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>


<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <match placeholder="Select a customer in the list or search his name ">{{$select.selected.name}}</match>
    <choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </choices>
</ui-select>

【问题讨论】:

    标签: angularjs ui-select angularjs-bootstrap


    【解决方案1】:

    我从您的代码中了解到,您希望选择项目并根据选择执行某些操作,如果是这样,请将 on-select="onSelected($item)" 添加到您的 ui-select 并在控制器中:

    $scope.onSelected = function (selectedItem) {
      // do selectedItem.PropertyName like selectedItem.Name or selectedItem.Key 
      // whatever property your list has.
    }
    

    【讨论】:

    • 对我来说,除非$item 作为参数传递并在函数中使用,否则回调函数不会改变任何内容。我相信这是因为on-select 回调被调用之前 ng-model 被更新。
    • 这确实适用于多选,但是对于我来说,在正常选择的情况下,我必须使用 $select.selected 参数调用 on-select 函数。
    • 谢谢,我试图找到一种方法来验证选择,在我的例子中是域名。如果输入了无效域,则执行 $select.selected.pop() 并返回 false。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多