Generating Angular select options dynamically using ng-repeat

Question

Generating Angular select options dynamically using ng-repeat

I've been struggling for several days now with ngOptions and ngRepeat. I am trying to create a select option for a people control. The REST service is returning an array as shown below. Despite trying various solutions from Stack Overflow and the Angular documentation, I am unable to display even a single attribute. What am I doing wrong?

Below are some of my attempts.

Thank you in advance for any advice and assistance.

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form>
        <label>Captain:
            <select ng-model="team.captain">
                <option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option>
            </select>
        </label><br />
    </form>

javascript angularjs angularjs-ng-repeat ng-options

Answer 1

Answer №1

Don't forget to include your controller in the application:

angular.module('myApp').controller('MyCtrl', MyCtrl);

Next, make sure to add

<html ng-app="myApp"></html>

in your HTML template.

Finally, specify the controller in the template to manage the desired section like this:

<form ng-controller='MyCtrl'>

Answer 2

Don't forget to include your controller in the application:

angular.module('myApp').controller('MyCtrl', MyCtrl);

Next, make sure to add

<html ng-app="myApp"></html>

in your HTML template.

Finally, specify the controller in the template to manage the desired section like this:

<form ng-controller='MyCtrl'>

Answer 3

Answer №2

<!DOCTYPE html>
<htm ng-app="myApp">


<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-controller="MyCtrl">
..            <select ng-model="team.captain">
                <option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option>
            </select>
     </form>
  <script>
    var myApp = angular.module('myApp',[]);

 function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];

}

myApp.controller('MyCtrl',MyCtrl);
    </script>
</body>

</html>

Answer 4

<!DOCTYPE html>
<htm ng-app="myApp">


<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-controller="MyCtrl">
..            <select ng-model="team.captain">
                <option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option>
            </select>
     </form>
  <script>
    var myApp = angular.module('myApp',[]);

 function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];

}

myApp.controller('MyCtrl',MyCtrl);
    </script>
</body>

</html>

Answer 5

Answer №3

To properly set up the controller for the myApp module, you need to follow these steps:

First, register the controller like this:

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', MyCtrl);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];
}

Next, in your HTML code, make sure to include ng-app="myApp" and ng-controller="myCtrl" like this:

<html ng-app="myApp">
  <head>
    // Include your scripts here
  </head>
  <body ng-controller="myCtrl">
    <form>
        <label>Captain:
            <select ng-model="team.captain">
              <option value="">Select one</option>
              <option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option>
            </select>
        </label><br />
    </form>
  </body>
</html>

For a demo, you can check out this PLUNKER DEMO LINK

Answer 6

To properly set up the controller for the myApp module, you need to follow these steps:

First, register the controller like this:

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', MyCtrl);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];
}

Next, in your HTML code, make sure to include ng-app="myApp" and ng-controller="myCtrl" like this:

<html ng-app="myApp">
  <head>
    // Include your scripts here
  </head>
  <body ng-controller="myCtrl">
    <form>
        <label>Captain:
            <select ng-model="team.captain">
              <option value="">Select one</option>
              <option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option>
            </select>
        </label><br />
    </form>
  </body>
</html>

For a demo, you can check out this PLUNKER DEMO LINK

Answer 7

Answer №4

Hello, Give this a shot :

APP.JS CODE

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Hero';
    $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];
    $scope.selected = $scope.players[0];
}

HTML CODE

<select ng-options="player as player.nickName for player in players ng-model="selected"></select>

Check it out with this live demo : Select in AngularJs Fiddle

Thank you & Best wishes

Answer 8

Hello, Give this a shot :

APP.JS CODE

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Hero';
    $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];
    $scope.selected = $scope.players[0];
}

HTML CODE

<select ng-options="player as player.nickName for player in players ng-model="selected"></select>

Check it out with this live demo : Select in AngularJs Fiddle

Thank you & Best wishes

Generating Angular select options dynamically using ng-repeat

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

404 Error: JSON POST and GET Request Not Located

Tips for displaying "in progress" in AngularJS when data loading is slow

Utilizing AngularJS: Implementing a directive to invoke a controller function with parameters

Creating HTML tabs using jQuery with input[type="radio"] tutorial for beginners

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

Prefering `window.jQuery` over the yarn version

Cease the use of jQuery animations

Storing an array in $cacheFactory with AngularJS

What is the process for developing a personalized search feature in VueJS?

Ways to dynamically manipulate HTML elements in Angular 5

Challenges with using async await alongside synchronous functions

The download functionality in HTML5 is not functioning properly, so users are forced to rename files when downloading

Include a return or delete from the default IO statement

Adjust the size of the font for the placeholder text

Discovering the selected row with jqueryIs there a way to locate

When utilizing Vue components, the issue of "setattr" arises when trying to assign

How to incorporate markdown files as strings in Next.js

The functionality of the Bootstrap carousel for moving to the next and previous images is malfunctioning, as it only

Having difficulty accessing information from a webservice on the Ionic1 framework

Intersection observer automatically removes images from carousel (Siema) after they have been viewed