AngularUI select2 onChange 方法

Posted 2023-05-07

【中文标题】AngularUI select2 onChange 方法

【英文标题】：AngularUI select2 onChange method

【发布时间】：2013-03-15 09:21:10

【问题描述】：

我该如何做一些事情：

   <select ui-select2 multiple="true" on-change="onChange()" data-ng-model="select2Model"></select>

在我的控制器中，我定义了 onChange(select2OnChangeData)。

我尝试添加这个

    scope: 
        model: "=ngModel",
        onChange: "&onChange"
    ,

到 angular-ui，但这改变了范围变量并破坏了其余的功能。

我真的不想这样做：

.on("改变", 函数(e)

【问题讨论】：

为此使用 ng-change

与ng-change相关的方法在指令初始化时会执行多次。

【参考方案1】：

幸好我在我的项目中做到了这一点：

HTML

<select data-placeholder="Select an asset" class="input-xxlarge" ui-select2="sourceAssetId" ng-model="sourceAssetId" ng-options="asset.id as asset.name for asset in assets"></select>

指令

module.directive("uiSelect2", function() 
    var linker = function(scope, element, attr) 
        element.select2();

        scope.$watch(attr.ngModel, function(newValue, oldValue) 
            console.log("uiSelect", attr.ngModel, newValue, oldValue);

            // Give the new options time to render
            setTimeout(function() 
                if(newValue) element.trigger("change");
            )
        );
    

    return 
        link: linker
    
);

相关控制器代码

$scope.$watch("sourceAssetId", function(newValue, oldValue) 
    if(newValue) $scope.fetchAsset();
);

【讨论】：

使用它的 html 看起来像什么？

如何调用 onChange 方法？

就我而言，我没有。我在 ng-model 属性上设置了 $scope.$watch。

Gotcha - 那么你会在控制器中做同样的事情吗？

有点跑题，ng-options 不适合ui-select2，应该使用<option ng-repeat>。