AngularJS: ngOptions not working (ngModel included, using "controller as" syntax)

156 views Asked by At

I'll keep this short.

http://codepen.io/anon/pen/waXWpw?editors=101

Here's something I made that hopefully illustrates my problem (I also hope I have Plunker working correctly...). The first dropdown is my attempt, and the other is one I took from another working Plunker that no longer works here...

I simply can't figure out the reason why this isn't working. Essentially I want the user to be able to select a number of rounds from a dropdown, but no matter what I try I can't get ngOptions to function. I simply get "undefined" inside the dropdown, and no other options appear.


EDIT: I fixed the Plunker, and suddenly ngOptions started working, so now my problem is that I have no idea how to replicate my problem. I'll have to include my actual code here to see if anyone can spot the error.

To be clear, everything else on the page is functioning well, including ngMessages, ngAnimate, Angular UI, and other form elements, so I'll include only the relevant HTML.

HTML:

<div ng-controller="CreateController as create">
  <form name="creationForm" novalidate>
    <div>
      <select name="numberOfRounds" 
              ng-model="create.numberOfRounds" 
              ng-options="item.rounds as item.name for item in create.possibleNumbersOfRounds" 
              required>
      </select>
      <label>Number of Rounds</label>
    </div>
  </form>
</div>

JS (Controller):

angular
.module('TabIt')
.controller('CreateController', ['$state', '$scope', 'TournamentFactory', function ($state, $scope, TournamentFactory) {

    this.possibleNumbersOfRounds = [
        { "rounds": 0, "name": "Please make a selection"},
        { "rounds": 2, "name": "2 rounds" },
        { "rounds": 3, "name": "3 rounds" },
        { "rounds": 4, "name": "4 rounds" },
        { "rounds": 5, "name": "5 rounds" },
        { "rounds": 6, "name": "6 rounds" },
        { "rounds": 7, "name": "7 rounds" },
        { "rounds": 8, "name": "8 rounds" },
        { "rounds": 9, "name": "9 rounds" }
    ];

    this.numberOfRounds = this.possibleNumbersOfRounds[0].code;

}]);
0

There are 0 answers