How to convert a simple select to use AngularJS data array?

Question

I have an old system which needs a bit of a tweak. All works as I expect when I have some AngularJS declarations and plain HTML/JavaScript. Current code is:

<div ng-controller="myController as vm">
 
    <select name="items" id="items">
    </select>
 
    <script type="text/javascript">
        // Sample data
        const options = [
            { value: '1', text: 'Option 1' },
            { value: '2', text: 'Option 2' },
            { value: '3', text: 'Option 3' },
        ];
 
        // Get the select element
        const select = document.getElementById('items');
 
        // Populate the select with options
        options.forEach(option => {
            const opt = document.createElement('option'); // Create a new <option> element
            opt.value = option.value; // Set the value attribute
            opt.textContent = option.text; // Set the visible text
            select.appendChild(opt); // Add the option to the <select>
        });
 
    </script>
</div>

I have some data in myController declared in the first div ng-controller which returns an array of data.

Instead of having the items hardcoded as they currently are, how can I use my vm variable to call getData (which I already have and is bringing back data) so the items are replaced by the data retrieved by the AngularJS controller?

I tried

 const options = vm.getData();

but that didn't work.

I have tried other sites for syntax reference but either way I can't connect it using the JavaScript declaration above

You’re mixing plain JavaScript <script> with AngularJS, which won't work the way you expect. Inside your <script>, vm doesn't exist in the global scope. It's part of AngularJS’s internal scope. So const options = vm.getData(); won't find vm there. You should bind the data using Angular templates ng-options or ng-repeat and not plain JavaScript. — AztecCodes
– AztecCodes, Commented Apr 9 at 13:25

Naren Murali · Accepted Answer · 2025-04-09 10:56:21Z

0

You can use ng-options to dynamically create the options, then use ng-model to bind the selected value.

var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
$scope.selected= null;
  $scope.options = [{
      value: '1',
      text: 'Option 1'
    },
    {
      value: '2',
      text: 'Option 2'
    },
    {
      value: '3',
      text: 'Option 3'
    },
  ];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myController as vm">

  <select name="items" id="items" ng-options="item as item.text for item in options track by item.value" ng-model="selected">
  </select>
  <br/>
  {{selected}}
</div>

answered Apr 9 at 10:56

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

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

5 Comments

KeithViking Apr 9 at 11:04

How do i call the method in my controller (vm.getData) that i listed in my question?

Naren Murali Apr 9 at 11:12

@KeithViking try <div ng-app="myModule" ng-controller="myController as vm" ng-init="vm.getData()"> on the to get the data and then assign this fetched value to $scope.options = response and then angularjs will populate the list dynamically

Naren Murali Apr 9 at 11:22

@KeithViking please share the contents of getData to help further

KeithViking Apr 9 at 11:58

getData just returns a complex object with an Id and Name (i know this works as i have tested this). I just want const options in my original code to get the data from my AngularJs controller method

Naren Murali Apr 9 at 11:59

@KeithViking if you declare it above the controller using var, then directly assign it $scope.options = options;, please modify the working example to replicate the issue and provide steps to replicate and expected output

Collectives™ on Stack Overflow

How to convert a simple select to use AngularJS data array?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related