Benyi Hsia

我是Benyi,這裡存放關於資訊科技的文章

Posts match “ AngularJS ” tag:

使用 AngularJS 雙向綁定 Semantic UI Dropdown

| Comments

最近因為需要,使用 AngularJS 與 Semantic UI 作為網站開發的前端框架。
AngularJS 的特性與方便的地方,就是他的雙向資料綁定功能。

然而,Semantic UI 預設是使用 jQuery 來操作他的元件等。

以 Semantic UI 提供的 Dropdown 為例


  

會發現一個有趣的現象,
當下拉選單選取的時候,size 這個 model 會更新
但從 controller 更新 $scope.size 時 (或從另一個 input 更新 size),卻不會同步到 Dropdown 上跟著選取。

原因是 size 雖然與 <select> 綁定了,但 AngularJS 與 Semantic UI 各自為政
想要更新 Dropdown? 沒問題! 請透過 Semantic UI 提供的 jQuery API 來更新。

$('.dropdown').dropdown('set selected', 'XL');

使用 Semantic UI 提供的 API 固然能解決下拉選單的選擇問題,但這樣只有單向呀!

能不能當我選擇下拉選單的時候,size model 跟著更新;而手動指派 size 的時候,下拉選單跟著更新?

有鑑於此,只好使用 AngularJS 的 $watch,監視 $scope.size 的變化。當有變化的時候,手動同步到下拉選單上。

$scope.$watch('size', function (n, o) {
    $timeout(function() {
        angular.element('select[ng-model=size]').dropdown('set selected', n );
    });
}, true);

使用 $scope.$watch 監視 size 的變化,
當一有變化的時候,立刻執行一次 dropdownset selected 方法。

angular.element 的選擇器可以自定,但我習慣直接用 [ng-model=size] 來當作名稱,
因為這樣就不需要另外指定 ID 或 name 了。

如此一來,改變下拉選單,size 本來就會更新,但改變 size 時,下拉選單也可以同步更新了。

算是... 手動綁定吧..

PS. 所需要的 $scope $timeout 記得注入。