Question

190

How add options to a select with an AngularJS directive?

rated 0 times [ 195] [ 5] / answers: 1 / hits: 34062 / 11 Years ago, tue, august 27, 2013, 12:00:00

I have a select tag (to be used for country selection) which I want to prefill with options using a directive:

<select class=countryselect required ng-model=cust.country></select>

My directive goes like

return {

  restrict : C,

  link: function postLink(scope, iElement, iAttrs) {

     var countries = [

        [AND,AD - Andorra,AD],

        [UAE,AE - Vereinigte Arabische Emirate,AE]

        ... //loop array and generate opt elements

        iElement.context.appendChild(opt);

    }

  }

I am able to fill the select with additional options, but the ng-model binding does not work. Even if cust.country has a value (e.g. UAE), the option is not selected.

How to make the select display the value of cust.country? If think I have some timing problem here.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tylerdamiena

Add To Favorites

Follow

Total Points: 139

Total Questions: 90

Total Answers: 118

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

tylerdamiena questions

1 How to access sveltekit session in endpoint?

Tue, May 3, 22, 00:00, 2 Years ago

1 React.js, Each child in a list should have a unique key prop. how to fix if key is already given

Mon, Mar 7, 22, 00:00, 2 Years ago

1 Can`t resolve image.png in styles.css

Fri, Sep 17, 21, 00:00, 3 Years ago

1 Warning: validateDOMNesting(...): < body> cannot appear as a child of < div> in React.js

Wed, May 26, 21, 00:00, 3 Years ago

1 Using readonly on a reactive object

Tue, May 26, 20, 00:00, 4 Years ago

View All

answered 11 Years ago cruzjenseny · Accepted Answer

You can use directive from Angular JS:

Markup:

<div ng-controller=MainCtrl>

<select ng-model=country ng-options=c.name for c in countries></select>

{{country}}

</div>

Script:

app.controller('MainCtrl', function($scope) { 

   $scope.countries = [

    {name:'Vereinigte Arabische Emirate', value:'AE'},

    {name:'Andorra', value:'AD'},

  ];



  $scope.country = $scope.countries[1]; 



});

Check the docs of select: Angular Select

EDIT WITH DIRECTIVE

Directive:

  app.directive('sel', function () {

    return {

        template: '<select ng-model=selectedValue ng-options=c.name for c in countries></select>',

        restrict: 'E',

        scope: {

            selectedValue: '='

        },

        link: function (scope, elem, attrs) {

            scope.countries = [{

                name: 'Vereinigte Arabische Emirate',

                value: 'AE'

            }, {

                name: 'Andorra',

                value: 'AD'

            }, ];

            scope.selectedValue = scope.countries[1];

        }

    };

});

Main controller:

app.controller('MainCtrl', function($scope) {



  $scope.country={};



})

Markup:

<div ng-controller=MainCtrl>

<sel selected-value=country></sel>

{{country}}

</div>

Working Example: EXAMPLE