What is the best way to incorporate choices into a dropdown menu using an AngularJS directive?

Question

What is the best way to incorporate choices into a dropdown menu using an AngularJS directive?

Looking to prefilled a select tag used for country selection with options using a directive:

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

The custom directive I've created is as follows:

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);
    }
  }

Although I am successfully adding additional options to the select, I am facing an issue with the ng-model binding. Even when cust.country has a value (e.g. "UAE"), the option is not selected.

Any suggestions on how to ensure that the select displays the value of cust.country? I suspect there might be a timing problem at play here.

javascript angularjs angularjs-directive

Answer 1

Answer №1

Utilize the directive feature of Angular JS:

Code Snippet:

<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>

Script Section:

app.controller('MainCtrl', function($scope) { 
   $scope.countries = [
    {name:'United Arab Emirates', value:'AE'},
    {name:'Andorra', value:'AD'},
  ];

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

});

Refer to the select documentation: Angular Select

ENHANCEMENT WITH DIRECTIVE

Custom 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: 'United Arab Emirates',
                value: 'AE'
            }, {
                name: 'Andorra',
                value: 'AD'
            }, ];
            scope.selectedValue = scope.countries[1];
        }
    };
});

Main controller Function:

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

  $scope.country={};

})

Updated Code:

<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>

See a working example here: EXAMPLE

Answer 2

Utilize the directive feature of Angular JS:

Code Snippet:

<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>

Script Section:

app.controller('MainCtrl', function($scope) { 
   $scope.countries = [
    {name:'United Arab Emirates', value:'AE'},
    {name:'Andorra', value:'AD'},
  ];

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

});

Refer to the select documentation: Angular Select

ENHANCEMENT WITH DIRECTIVE

Custom 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: 'United Arab Emirates',
                value: 'AE'
            }, {
                name: 'Andorra',
                value: 'AD'
            }, ];
            scope.selectedValue = scope.countries[1];
        }
    };
});

Main controller Function:

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

  $scope.country={};

})

Updated Code:

<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>

See a working example here: EXAMPLE

Answer 3

Answer №2

To make this function properly, you must include the options in the ngModelController. Here is an example of how to do it:

return {
    restrict : 'C',
    require: ['select', 'ngModel'],
    link: function(scope, element, attrs, controllers) {
        var countries = [['A', 'text text']];
        countries.forEach(option => {
            const optionElement = angular.element('<option/>')
                .attr('value', option[0])
                .text(option[1]);

            element.append(optionElement);
            controllers[0].addOption(option.value, optionElement);
        });
    }
};

Answer 4

To make this function properly, you must include the options in the ngModelController. Here is an example of how to do it:

return {
    restrict : 'C',
    require: ['select', 'ngModel'],
    link: function(scope, element, attrs, controllers) {
        var countries = [['A', 'text text']];
        countries.forEach(option => {
            const optionElement = angular.element('<option/>')
                .attr('value', option[0])
                .text(option[1]);

            element.append(optionElement);
            controllers[0].addOption(option.value, optionElement);
        });
    }
};

What is the best way to incorporate choices into a dropdown menu using an AngularJS directive?

Answer №1

Answer №2

Similar questions

Create a Jest unit test for a specific function

`Need help testing flow.js file uploads using Selenium?`

Managing objects over time in Three.js

Retrieve information attribute within VueJS

Implement a Basic Custom Shader on a Cube in Three.js

The input field in Angular dynamically populates values into multiple instances of the same text

Determining the type of index to use for an interface

The overall outcome determined by the score in JavaScript

My data is not appearing with ng-repeat or ng-bind

The PHP query that was sent through an AJAX POST request is not being executed correctly

Looking to ensure that the appropriate error validation message displays when an incorrect username is entered and submitted within an Angular JS application

Can items containing various conditional fields from a collection be published simultaneously?

Steps to divide input form data and transmit it to MySQL

Encountering a problem with TypeScript while employing Promise.allSettled

Tips for effectively using query parameters with UI router in AngularJS

Manipulating the DOM by nesting an icon within a button element in HTML

I can't figure out why the callback function for my $.get() request is not being triggered when I send data to the Express

The issue of jQuery not loading within Ajax content has been resolved

Can you explain the significance of the colon in this context?

Error: Attempting to destructure without initializing / identifier 'name' is already in use [mysql][nodejs]