twitter-bootstrap - AngularJS で Bootstrap Multiselect Dropdown を使用するにはどうすればよいですか

Question

AngularJS で Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/を使用したい。ディレクティブに移す必要があると聞いています。しかし、それは非常に複雑で、何をしなければならないのかわからないと思います。経験者の方、ご指導お願いします！わかりました。

Answer 1

これが私のプロジェクトで使用するディレクティブです。Chrome と Firefox で動作します。必要に応じてオプションを変更できます。

angular.module('yourApp')
.directive('yourDirective', function () {
    return {
        link: function (scope, element, attrs) {
            element.multiselect({
                buttonClass: 'btn',
                buttonWidth: 'auto',
                buttonContainer: '<div class="btn-group" />',
                maxHeight: false,
                buttonText: function(options) {
                    if (options.length == 0) {
                      return 'None selected <b class="caret"></b>';
                    }
                    else if (options.length > 3) {
                      return options.length + ' selected  <b class="caret"></b>';
                    }
                    else {
                      var selected = '';
                      options.each(function() {
                        selected += $(this).text() + ', ';
                      });
                      return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
                    }
                }
            });

            // Watch for any changes to the length of our select element
            scope.$watch(function () {
                return element[0].length;
            }, function () {
                element.multiselect('rebuild');
            });

            // Watch for any changes from outside the directive and refresh
            scope.$watch(attrs.ngModel, function () {
                element.multiselect('refresh');
            });

        }

    };
});

AngularJS v1.3.15 および bootstrap-multiselect v0.9.6 で動作するディレクティブの 2 つのスニペットを更新: JavaScript、CoffeeScript

Answer 2

非常に再利用可能なコードを作成する必要がない場合、実際にはそれほど複雑ではありません。最初のステップは、基本的なディレクティブを作成し、DOM 要素を取得することです。

angular.module('yourapp', [])

.directive('multiselectDropdown', [function() {
    return function(scope, element, attributes) {

        element = $(element[0]); // Get the element as a jQuery element

        // Below setup the dropdown:

        element.multiselect({
            option1: 123,
            option2: "abcd",
            // etc.
        })

        // Below maybe some additional setup
    }
}]);

基本的に、ディレクティブに入ると、実際には通常の jQuery または JS コードになります。

次に、HTML コードで次のようにします。

<select multiselectDropdown >
    <option value="1">One</option>
    <option value="2">One</option>
    <option value="3">One</option>
</select>

DIV で追加の属性を指定しattributes、ディレクティブのパラメーターを使用して値を取得することもできます。