CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatng-options
Lidjan
Lidjan

Reputation: 154

Angular select options with ng-repeat

I'm struggled for few days now with ngOptions, ngRepeat. I have to do something like select option of people control. My REST service is giving me something like array in snippet below. I tried every stackoverflow answer and example from Angular documentation. No results. I can't even show a single attribute - wham am i doing wrong?

There is some tries below.

Thanks for any advice and help.

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>

Upvotes: 0

Views: 1166

Answers (4)

Amulya Kashyap
Amulya Kashyap

Reputation: 2373

Dear, Try This one :

APP.JS CODE

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"}];
    $scope.selected = $scope.players[0];
}

HTML CODE

<select ng-options="player as player.nickName for player in players ng-model="selected"></select>
  1. Working Fiddle Here of your code : Select in AngularJs Fiddle

Thanks & Cheers

Upvotes: 0

Shaishab Roy
Shaishab Roy

Reputation: 16805

you need to register controller for myApp module

like:

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"}];

}

and in html you should use ng-app="myApp" and ng-controller="myCtrl"

like:

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

  <head>
    // load your script here
  </head>

  <body ng-controller="myCtrl"> // used controller
    <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>

PLUNKER DEMO LINK

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

<!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>

Upvotes: 0

Sergey Yarotskiy
Sergey Yarotskiy

Reputation: 4804

You forgot to register you controller in your app: angular.module('myApp').controller('MyCtrl', MyCtrl);

Then in the template in html set <html ng-app="myApp"></html>.

And then in template specify controller which controlls desired piece of template like <form ng-controller='MyCtrl'>

Upvotes: 1

Related Questions