Using SelectBoxIt in AngularJS Directive

Question

I want to implement SelectBoxIt in my angularJS directive. Here is my directive's template html snippet(lookup.template.html):

<select class="selectBoxit" ng-model="ngModel">
    <option value="" disabled> {{placeholder}}</option>
    <option value='{{a.LookupCode}}' ng-repeat='a in lookups'>{{a.Name}}</option>
</select>

Isolated scope directive:

.directive('lookup', function(){
        return {
            restrict: 'E',
            scope: {
                lookups: "=lookups",
                ngModel: "=ngModel"
            },
            templateUrl: 'templates/lookup.template.html',
            link: function (scope, element, attrs) {
                scope.placeholder = attrs['placeholder'];
                $(".selectBoxit").selectBoxIt().on('open', function()
                {
//ScrollBar
$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();
                });
            }
        }
    });

Lookup Controller:

 .controller('LookupController', function($scope){
        $scope.schoolTypeCode = 'GNR';
        $scope.schoolTypes = [{  Name: "Kinder Garten",  LookupCode: "KG" },
            { Name: "Elemetary",  LookupCode: "ELM" },
            { Name: "High School",   LookupCode: "HSC" },
            { Name: "Preparatory",   LookupCode: "PRP" },
            { Name: "General",   LookupCode: "GNR" },
            {  Name: "Distance",  LookupCode: "DST"  }];
    });

and finally view using directive:

<lookup  id="cboSchoolType" lookups="schoolTypes"
                                 ng-model="SchoolTypeCode" placeholder="Select School Type"></lookup>

SelectBoxIt initialization worked fine but I noticed two problems. First, default value(ngModel) is not assigned and second, initialization is happenening before angular repeat finishes populating the options.This will result an empty select list and the following error message when it is clicked:

Uncaught TypeError: Cannot read property 'list' of undefined

So, are there any other ways to set the default value and trigger SelectBoxIt initialization after options are populated by angular repeat?

Thanks.

i think you need to use setTimeout inside the link function

madhurjya
– madhurjya

2015-05-19 10:16:47 +00:00
Commented May 19, 2015 at 10:16 — madhurjya
– madhurjya, Commented May 19, 2015 at 10:16

Muhammad Imran · Accepted Answer · 2015-05-24 06:38:16Z

1

try the "dropdown" instead of "list"

so instead of

$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();

try this line in your event function

$(this).data('selectBoxSelectBoxIt').dropdown.perfectScrollbar();

answered May 24, 2015 at 6:38

Muhammad Imran

1517 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using SelectBoxIt in AngularJS Directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related