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

Answer 1

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>