Wie Standard-Auswahl 2 in AngularJS

Statt ui-select, verwende ich jQuery select2 in AngularJS. Ich habe eine benutzerdefinierte Direktive für select2 erstellt, für ng-model. Ich bekomme den Wert von ng-Modell. Aber wenn ich das select2 standardmäßig aktualisiere, funktioniert es nicht. Ich benutze select2 v4.0.3.Wie Standard-Auswahl 2 in AngularJS

Richtlinie

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>

-Controller

$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

Quelle

2017-07-04 Abel Chun

haben Sie überprüft, meine Lösung? –

prüft diesen Arbeitscode.

einfach unter den Code hinzufügen.

$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>

Quelle

2017-07-04 13:02:59

Das Problem des Modells aus syn sein c ist ein typisches Problem, wenn zwei verschiedene Bibliotheken nicht synchronisieren. jQuery select2 muss bestimmte Winkelaufrufe auslösen, um sicherzustellen, dass Modellwerte festgeschrieben werden. Da dies der Kontrolle eines Benutzers einer Bibliothek entzogen ist, stoßen wir unter anderem auf diese bekannten Probleme. Es sei denn du hast select2.

Bei der Verwendung von AngularJS empfiehlt es sich, Komponenten zu verwenden, die nativ in AngularJS geschrieben sind. Daher existieren Bibliotheken wie angular-ui, ui-select.

Ich sage, es gibt keinen sauberen Weg, um dieses Problem zu lösen.

Versuchen

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

Quelle

2017-07-04 12:57:45 bhantol

Wie Standard-Auswahl 2 in AngularJS

Antwort

Verwandte Themen