Search code examples
angularjsng-optionsangularjs-select

Select options not settings in AngularJs

I am using Angular Js and trying to add items in dropdownbox. But the items are not appearing in the select box. Below is the code I tried. In index.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <meta charset="UTF-8" />   
    <title></title>
    <script type="text/javascript" src="/scripts/angular.min.js"></script>
    <script type="text/javascript" src="/app/app.module.js"></script>
    <script type="text/javascript" src="/app/main.js"></script>
    <script type="text/javascript" src="/app/controllers.js"></script>
    <script type="text/javascript" src="/app/directives.js"></script>
    <script type="text/javascript" src="/app/services.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body ng-controller="Main as vm">

    <div class="container">
        <br />
        <div class="row">
            <div class="col-sm-2">
                <label class="control-label">Environment :<em style="color:red">*</em></label>
            </div>
            <div class="col-sm-4 form-group">
                <select name="mySelect" id="mySelect"
                        class="dropdown form-control cl-sm-6"
                        ng-options="option.name for option in data.availableOptions track by option.id"
                        ng-model="data.selectedOption">
                </select>                     
            </div>
        </div>
    </div>
</body>
</html>

In controller.js

(function () {
    'use strict';
    var myApp = angular.module('app');

    myApp.controller('Main', function ($scope, fileUploadService, catcherAPIService, $http) {      
 $scope.data = {
        availableOptions: [
          { id: '1', name: 'Select' },
          { id: '2', name: 'aY1' },
          { id: '3', name: 'aY3' },
          { id: '4', name: 'bA4' }

        ],
        selectedOption: { id: '1', name: 'Select' }
    };

       });

})();

what am I missing? Also, If the selected option is not be set, how to re-frame the above code. By default, I want to keep "Select" Thanks

Solution

  • There are few mistakes,

    (i) You need to add empty dependencies to your app.

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

    (ii) I would separate the selected option as below

    DEMO

     var myApp = angular.module('app',[]);
 myApp.controller('Main', function ($scope) {      
        $scope.data = {
            availableOptions: [
              { id: '1', name: 'aY1' },
              { id: '2', name: 'ay3' },
              { id: '3', name: 'bA4' },
              { id: '4', name: 'bA7' },
              { id: '5', name: 'cA1' }

            ]           
        };     
       $scope.selectedOption = $scope.data.availableOptions[3];
});
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="Main">
<div class="container">
                <br />
                <div class="row">
                    <div class="col-sm-2">
                        <label class="control-label">Environment :<em style="color:red">*</em></label>
                    </div>
                    <div class="col-sm-4 form-group">
                        <select name="mySelect" id="mySelect" class="dropdown form-control cl-sm-6" ng-options="option.name for option in data.availableOptions" ng-model="selectedOption"></select>                     
                    </div>
                </div>
 </div>
 </body>