angularJSでselect2をデフォルトにする方法

代わりにui-selectを使用して、AngularJSでjQuery select2を使用しています。 select-2のカスタムディレクティブをng-model用に作成しました。私はng-modelから値を取得します。しかし、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は、2つの異なるライブラリが同期しないときの私たちの典型的な問題です。 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をデフォルトにする方法

答えて

関連する問題