How to use with ngOptions

[tarlepp]

Hi!

I just "fixed" library to support following structure:

<select class="form-control"
    data-style="btn-primary"
    data-live-search="true"
    data-selectpicker
    ng-model="selectedPeople"
    ng-collection="people"
    ng-options="p.id as p.name for p in people"
></select>

And actual directive:

angular.module("angular-bootstrap-select", [])
    .directive("selectpicker",
        [
            "$timeout",
            function($timeout) {
                return {
                    restrict: "A",
                    require: ["?ngModel", "?ngCollection"],
                    compile: function(tElement, tAttrs, transclude) {
                        console.log("init bootstrap-select");
                        tElement.selectpicker();

                        if (angular.isUndefined(tAttrs.ngModel)) {
                            throw new Error("Please add ng-model attribute!");
                        } else if (angular.isUndefined(tAttrs.ngCollection)) {
                            throw new Error("Please add ng-collection attribute!");
                        }

                        return function(scope, element, attrs, ngModel) {
                            if (angular.isUndefined(ngModel)){
                                return;
                            }

                            scope.$watch(attrs.ngModel, function(newVal, oldVal) {
                                if (newVal !== oldVal) {
                                    $timeout(function() {
                                        console.log("value selected");
                                        element.selectpicker("val", element.val());
                                    });
                                }
                            });

                            scope.$watch(attrs.ngCollection, function(newVal, oldVal) {
                                if (newVal && newVal !== oldVal) {
                                    $timeout(function() {
                                        console.log("select collection updated");
                                        element.selectpicker("refresh");
                                    });
                                }
                            });

                            ngModel.$render = function() {
                                element.selectpicker("val", ngModel.$viewValue || "");
                            };

                            ngModel.$viewValue = element.val();
                        };
                    }
                }
            }
        ]
    );

I know that this not yet "ready" but I hope it will help someone. If you wanna i could make pull request of this.

[thejohnfreeman]

This requires an ng-collection attribute? That's not a standard Angular directive, and I don't have it on any of my elements, much less <select>s. Why is it required?

[tarlepp]

That ng-collection is used to watch scope changed on that collection. You're right about the "wrong" naming on it though. I will make a plunker of my approach today or tomorrow to demonstrate better this.

[tarlepp]

Right on, here is a plunker about my approach with this feel free to comment: http://plnkr.co/edit/NV6Vk0AtzJ25tQldgsJx?p=preview

[joaoneto]

Hello guys,

I updated the versions of dependencies and added the ability to deal with the ng-options in v0.0.2 release.

[aelfannir]

Thank you, Sometime it works, sometime no.