Select 选项不是 AngularJs 中的设置

Question

我正在使用 Angular Js 并尝试在下拉框中添加项目。但是这些项目没有出现在 select 框中。下面是我试过的代码。在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>

在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' }
    };

       });

})();

我错过了什么？另外，如果未设置 selected 选项，如何重新构建上述代码。默认情况下，我想保留 "Select" 谢谢

Answer 1

错误很少，

(i) 您需要向您的应用添加空依赖项。

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

(ii) 我将选择的选项分开如下

演示

 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>

Select 选项不是 AngularJs 中的设置

Select options not settings in AngularJs

angularjs

ng-options

angularjs-select