如何在angularJS中默認select2

取而代之的是使用ui-select，我在AngularJS中使用jQuery select2。我爲select-2，ng-model創建了自定義指令。我從ng模型中獲得價值。但是當我更新默認的select2時，它不起作用。我正在使用select2 v4.0.3。如何在angularJS中默認select2

指令

App.directive('jsSelect2', function ($timeout) { 
    return { 
     link: function (scope, element, attrs) { 
      jQuery(element).select2(); 

      scope.$watch(attrs.ngModel, function(){ 
       $timeout(function(){ 
        element.trigger('change.select2'); 
       },100); 
      }); 

     } 
    }; 
});

HTML

<select id="update_created_by" data-js-select2="" name="update_created_by" 
    data-placeholder="To Who" ng-model="anc.update_created_by" 
    ng-options="c.name for c in anc_staffs" 
    required="required" class="form-control"> 
</select>

控制器

$scope.anc_staffs = [{id:1, name:'abel'},{id:2, name:'john'}]; 
jQuery("#update_created_by").val(1); // Doesn't work, show empty 
jQuery("#update_created_by").val(1).trigger('change.select2'); // Doesn't work, show empty

來源

2017-07-04 Abel Chun

你檢查我的解決方案？ –

檢查這方面的工作代碼。

只需添加以下代碼。

$scope.anc = {}; 
$scope.anc.update_created_by = $scope.anc_staffs[0];


 

 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <title></title> 
 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
     <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> 
 
     <style> 
 
      .select2-container { 
 
       width: 100px !important; 
 
      } 
 
     </style> 
 
     <script> 
 
      var app = angular.module('plunker', []); 
 

 
      app.controller('MainCtrl', function ($scope) { 
 
       $scope.anc_staffs = [{ id: 1, name: 'abel' }, { id: 2, name: 'john' }]; 
 
       $scope.anc = {}; 
 
       $scope.anc.update_created_by = $scope.anc_staffs[0]; 
 
      }); 
 
      app.directive('jsSelect2', function ($timeout) { 
 
       return { 
 
        link: function (scope, element, attrs) { 
 
         jQuery(element).select2(); 
 

 
         scope.$watch(attrs.ngModel, function() { 
 
          $timeout(function() { 
 
           element.trigger('change.select2'); 
 
          }, 100); 
 
         }); 
 

 
        } 
 
       }; 
 
      }); 
 

 
     </script> 
 
    </head> 
 
    <body> 
 
     <div ng-app="plunker" ng-controller="MainCtrl"> 
 
      <select id="update_created_by" data-js-select2="" name="update_created_by" 
 
       data-placeholder="To Who" ng-model="anc.update_created_by" 
 
       ng-options="c.name for c in anc_staffs" 
 
       required="required" class="form-control"> 
 
      </select> 
 
     </div> 
 
    </body> 
 
    </html>

來源

2017-07-04 13:02:59

模型被淘汰順的問題當兩個不同的庫不同步時，c是我們的典型問題。 jQuery select2將需要觸發某些角度調用以確保提交模型值。由於這超出了圖書館用戶的控制範圍，我們遇到了這類已知的問題。除非你有select2。

使用AngularJS時，最好使用原生在AngularJS中編寫的組件。因此存在像angular-ui，ui-select這樣的庫。

我在說沒有乾淨的方法來解決這個問題。

嘗試

var $element = $('select').select2(); // Use the following inside your $timeout $element.trigger('change');

來源

2017-07-04 12:57:45 bhantol

如何在angularJS中默認select2

回答

相關問題