1

我在这里根据本教程为 ChosenJS 插件创建一个角度指令：https ://www.youtube.com/watch?v=8ozyXwLzFYs

我想要做的是在选择一个值时更新模型。

function Foo($scope) {
  $scope.legalEntitiesList = [
      { name: 'Foo' },
      { name: 'Bar' }      
  ];

  $scope.legalEntity = { name: 'Foo' };
}

myApp.directive('chosen', ['$timeout', function($timeout) {
  var linker = function(scope, element, attrs, ngModel) {
    if (!ngModel) return;

    element.addClass('chzn-select');

    $(element).chosen()
            .change(function(e) {
                console.log(ngModel.$viewValue);
            });

    scope.$watch(attrs.chosen, function() {
        $(element).trigger('liszt:updated');
    });
  }

  return {
    restrict: 'A',
    scope: true,
    require: '?ngModel',
    link: linker
  }
}]);

这是一个小提琴：http: //jsfiddle.net/dkrotts/MQzXq/7/。如果您选择不同的选项，则不会更新模型值。

4

2 回答 2

2

我想将此添加为评论，但我缺乏声誉点。但是，请注意，较新版本的 Chosen 使用该事件chosen:updated而不是liszt:updated-- 感谢 Dustin 的视频！

于 2014-02-15T14:13:33.843 回答
2

如果您修改选择以绑定到，legalEntity.name而不仅仅是legalEntity您的小提琴作品。

<select id="legalEntityInput" chosen="legalEntitiesList" ng-model="legalEntity.name" ng-options="legalEntity.name for legalEntity in legalEntitiesList" data-placeholder="Select..."><option></option></select>

有关示例，请参见此更新的小提琴。

于 2012-11-28T20:34:03.423 回答