Question

select2提供了一些自定义事件，我希望能够收听它们，特别是＆＃39; select2-removed＆＃39;或者更好的是它的习惯变化＆＃39;事件，我一直在网上寻找一些例子，但没有运气。

这是我到目前为止所做的事情：

HTML：

<input type="hidden" class="form-control" id="tags" ui-select2="modal.tags" data-placeholder="Available Tags" ng-model="form.tags">

JavaScript（Angular）

$scope.form = {tags: []};

postalTags = [
  {
    id: 1,
    text: 'Permanent Address'
  },
  {
    id: 2,
    text: 'Present Address'
  }
];

$scope.modal {
  tags: {
    'data': postalTags,
    'multiple': true
  }
};

// I doubt this is going to work, since i think this is only going to 
// listen on events emitted by $emit and $broadcast.
$scope.$on('select2-removed', function(event) {
    console.log(event);
});

// I can do this, but then i will not know which was removed and added
$scope.$watch('form.tags', function(data) {
  console.log(data);
});

用户实际在这里做的是编辑标记到他/她的地址的标签，通过编辑我的意思是用户可以将新标签标记到他/她的地址或删除以前标记的标签。这就是为什么我需要跟踪添加哪些标签以及删除哪些标签的原因。

更新

我在discussion上看到了一个似是而非的解决方案，但是我不能让提供的代码与我合作，所以我做了一些解决方法，这就是我做的。

所以不要添加，

scope.$emit('select2:change', a);

在这附近，

elm.select2(opts);

// Set initial value - I'm not sure about this but it seems to need to be there
elm.val(controller.$viewValue)

我把它放在这里，

 if (!isSelect) {
        // Set the view and model value and update the angular template manually for the ajax/multiple select2.
        elm.bind("change", function (e) {

          // custom added.
          scope.$emit('select2:change', e);

          e.stopImmediatePropagation();

然后我在我的控制器上做了常规，

$scope.$on('select2:change', function(event, element) {
  if(element.added) console.log(element.added);
  if(element.removed) console.log(element.removed);
}

并且工作得很好。

但我怀疑这是个好主意，我仍然希望有更好的解决方案。

Answer 1

我使用了一个指令来封装select，然后在link函数中我只是检索select元素并在事件处理程序中。

标记：

<select name="id" data-ng-model="tagsSelection" ui-select2="select2Options">
    <option value="{{user.id}}" data-ng-repeat="user in users">{{user.name}}</option>
</select>

使用Javascript：

link: function (scope, element, attributes) {
    var select = element.find('select')[0];
    $(select).on("change", function(evt) {
        if (evt.added) {
            // Do something
        } else if (evt.removed) {
            // Do something.
        }
    });

    $scope.select2Options = {
        multiple: true
    }
}

如何在AngularJS中监听select2事件

1 个答案: