1

ng-options によって入力された選択があります。

<select id="personId" name="personId" class="selectpicker" 
        ng-model="person" ng-options="person.Surname for person in persons track by person.Id">
    <option value="">Introduce yourself...</option>
</select>

しかし、表示する必要があるのは、選択自体ではなく、それに基づくブートストラップ選択 (div ベースのドロップダウン リストを作成するプラグイン) です。$('.selectpicker').selectpicker('refresh')そのため、選択したアイテムが更新されたときに呼び出す必要があります。それを行うことができるangularjs拡張ポイントはありますか?

4

2 に答える 2

1

実際の例を使用して、次のplunkrを作成しました。

myApp.directive("myselect", function($parse) {
  return {
    restrict: 'A',
    require: 'select',
    link: function(scope, element, attrs) {
      var ngModel = $parse(attrs.ngModel);

      $(element).selectmenu({
        "change": function(event, ui) {
          scope.$apply(function(scope) {
            // Change binded variable
            ngModel.assign(scope, $(element).val());
          });
        },
        "width": 200
      });

      var selectSource = jQuery.trim(attrs.ngOptions.split('|')[0]).split(' ').pop();
      var scopeCollection = $parse(selectSource);

      scope.$watchCollection(scopeCollection, function(newVal) {
        $(element).selectmenu('refresh');
      });
    }
  };
});

次のリソースの助けを借りて実現しました。

http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html#.VAbLDfl_t1A

https://groups.google.com/forum/#!topic/angular/S-a_SLp3MyM

于 2014-09-03T08:35:52.357 に答える
1

人の配列を「監視」することでそれを達成できます。したがって、コントローラーに次のコードを追加できます。

$scope.$watch('persons', function(newValue, oldValue) {
   if(!newValue || newValue === oldValue) return;

   //At this point, newValue contains the new value of your persons array
   $('.selectpicker').selectpicker('refresh');
});

selectpicker の更新は、persons 配列の内容が変更されるたびに実行されます (最初に初期化されたときを含む)。

お役に立てれば。

于 2014-09-03T06:45:31.500 に答える