Question

我有以下指令：

app.directive('scMultiselect', [function() {
    return {
        link: function(scope, element, attrs) {
            element = $(element[0]);

            element.multiselect({
                enableFiltering: true,

                // Replicate the native functionality on the elements so
                // that Angular can handle the changes for us
                onChange: function(optionElement, checked) {
                    optionElement.prop('selected', false);

                    if (checked)
                        optionElement.prop('selected', true);

                    element.change();
                }
            });

            scope.$watch(function () {
                return element[0].length;
            }, function () {
                element.multiselect('rebuild');
            });

            scope.$watch(attrs.ngModel, function() {
                element.multiselect('refresh');
            });
        }
    };
}]);

我的部分中的以下元素：

<select
    id="level_teachers"
    class="multiselect col-sm-10"
    multiple="multiple"
    ng-model="level.teachers"
    ng-options="teacher.id as teacher.name for teacher in teachers"
    sc-multiselect>
</select>

bootstrap-multiselect控件初始化并正确显示，但是当我在其中选择条目时，我的模型（level.teachers）仍为空。

Answer 1

有同样的问题，这对我有用：

首先添加ngModel作为链接功能的第4个参数。它非常有用 - 更多关于它：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

然后你基本上必须手动添加/删除onChange方法中的选项到/来自你的ngModel。

ngModel。$ setViewValue（）更新值，ngModel。$ render和scope。$ apply（）使其可见并进一步传播新模型:)

如果你只有一个选择，那么它更容易 - 由于没有数组控制而更少的代码 - 只需使用$ setViewValue（），$ render（）和$ apply（）。

app.directive('scMultiselect', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element = $(element[0]);

            element.multiselect({
                enableFiltering: true,
                onChange: function(optionElement, checked) {
                    optionElement.prop('selected', false);

                    var modelValue = ngModel.$modelValue; // current model value - array of selected items
                    var optionText = optionElement[0].text; // text of current option
                    var optionIndex = modelValue.indexOf(optionText); 
                    if (checked) {
                        if ( optionIndex == -1) { // current option value is not in model - add it
                            modelValue.push(optionText)
                        }
                        optionElement.prop('selected', true);
                    } else if ( optionIndex > -1 ) { // if it is - delete it
                        modelValue.splice(optionIndex,1);
                    }

                    ngModel.$setViewValue(modelValue);
                    ngModel.$render();
                    scope.$apply();
                }
            });

            scope.$watch(element[0].length, function () {
                element.multiselect('rebuild');
            });
        }
    };
});

希望它也适合你：）

Answer 2

可能是因为Bootstrap组件的构建方式不允许Angularjs使用它们。实例化后，他们真的没有办法更新自己，更重要的是，他们没有参与Angularjs的更新过程。无论如何，好消息是有人已经主动在Angularjs中重写那些引导程序组件，以便我们可以使用它们。

http://angular-ui.github.io/bootstrap/

如果您使用的是Bootstrap 3.x，请获取最新信息。如果您坚持使用2.3.x v0.8是支持2.3.x的最后一个版本

模型不在Angular.js指令中为bootstrap-multiselect更新

2 个答案: