CODEWITHSUNDEEP
javascripthtmlangularjs
utkarsh2k2
utkarsh2k2

Reputation: 1096

Display object data in select dropdown using ng-options

I am trying to use angularJS along with Symfony2. For starters, m trying to display the object's text property as options in a simple dropdown list using ng-options. Here's the HTML

    <div ng-app="demoAddList" ng-controller="myCtrl">
    <select ng-model="selectedProgram"  ng-options="programofinterest.id as programofinterest.text for programofinterest in programofinterests">
            </select>
        </div>
<p>Try to add the same item twice, and you will get an error message.</p>

Here's the script

var app = angular.module("programDropdown", []);
app.controller("myCtrl", function($scope) {
        $scope.programofinterests = [
            {id: '0', text: 'Masters - Information Systems Management'},
            {id: '1', text: 'Masters - Software Engineering'},
            {id: '2', text: 'Masters - Computer Security'},
            {id: '3', text: 'Bachelors of Computer Science'},
            {id: '4', text: 'Exchange Program'},
            {id: '5', text: 'Study Abroad'},
            {id: '6', text: 'Scientific Summer School'},
            {id: '7', text: 'French Summer School'},
            {id: '8', text: 'ME - Global IT Management'},
            {id: '9', text: 'ME -  Software Development and Multimedia'},
            {id: '10', text: 'ME - Systems, Networks and Security'}
        ];
});

However the result is empty dropdown. Have a look at the top-left corner of the screenshot enter image description here

Any ideas?

Upvotes: 0

Views: 64

Answers (1)

mvermand
mvermand

Reputation: 6117

First try to fix the "JQuery" and "require" issues. This will probably also fix your Angular issue, though not guaranteed since Angular normally does not need JQuery. It has a kind of lightweight JQuery embedded.

You might put a break-point in the controller and see if the debugger gets there.

Upvotes: 1

Related Questions