對於bootstrap-multiselect，模型未在Angular.js指令中更新

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

IT可能是因為Bootstrap組件的構建方式並不使Angularjs使用它們。 在實例化它們之后，它們實際上沒有辦法進行自我更新，更重要的是，它們不參與Angularjs的更新過程。 無論如何，好消息是有人主動在Angularjs中重寫了這些引導程序組件，以便我們可以使用它們。

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

如果您使用的是Bootstrap 3.x，請獲取最新版本。 如果您堅持使用2.3.x，則v0.8是支持2.3.x的最新版本