CODEWITHSUNDEEP
angularjsangularjs-directive
Paul Mrozowski
Paul Mrozowski

Reputation: 6734

Why isn't this Angular dropdown directive that uses ng-options and controllerAs working?

I'm using Angular 1.4.7 and I'm trying to create a really simple directive that creates a dropdown. I think this may be an issue with my scope references in the ng-options but I'm not seeing where I'm going wrong.

angular
    .module('app', []);

angular.module('app')
       .directive('inventorytest', function () {
    return {
        template: '<select ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}',

        scope: {},
        controller: function () {
            this.invTypes = [
                { code: 'A', desc: 'Alpha' },
                { code: 'B', desc: 'Bravo' },
                { code: 'C', desc: 'Charlie' },
            ];
            this.sample = 'Hello';
        },
        controllerAs: 'ctrl'
    }
});

I see the sample variable getting bound, but not my dropdown. I think I have the syntax correct for this, but obviously something is wrong.

What am I missing?

Upvotes: 1

Views: 75

Answers (2)

Colo Ghidini
Colo Ghidini

Reputation: 723

you are missing ng-model , look:

    angular
    .module('myApp', [])
     .directive('inventorytest', function () {
return {
    template: '{{ctrl.inv}} <select ng-model="ctrl.inv" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>',

    scope: {},
    controller: function () {
        this.invTypes = [
            { code: 'A', desc: 'Alpha' },
            { code: 'B', desc: 'Bravo' },
            { code: 'C', desc: 'Charlie' },
        ];
        this.sample = 'Hello';
        this.inv = ''
    },

    controllerAs: 'ctrl'
}

});

Upvotes: 1

ste2425
ste2425

Reputation: 4786

Your missing ng-model on your select. That's how angular knows what to do with your selected value.

Ive tested this with Angular v1.2.1 however not v1.4.7 but it had the same behavior.

Also i believe restrict is needed which your missing also but i admit i could be wrong with that.

EDIT: That statement is incorrect, just found this in the docs:

Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option.

bit below this section: https://docs.angularjs.org/guide/directive#template-expanding-directive

So your directive is:

angular.module('app')
       .directive('inventorytest', function () {
    return {
        restrict: 'A',
        template: '<select ng-model="selected" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}. Selected: {{selected}}',

        scope: {},
        controller: function () {
            this.invTypes = [
                { code: 'A', desc: 'Alpha' },
                { code: 'B', desc: 'Bravo' },
                { code: 'C', desc: 'Charlie' },
            ];
            this.sample = 'Hello';
        },
        controllerAs: 'ctrl'
    }
});

See fiddle for it running: http://jsfiddle.net/nh9ntgoj/1/

Upvotes: 1

Related Questions