-1

Angular Js を使用しており、ドロップダウン ボックスに項目を追加しようとしています。しかし、アイテムは選択ボックスに表示されません。以下は私が試したコードです。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' }
    };

       });

})();

私は何が欠けていますか？また、選択したオプションが設定されていない場合、上記のコードを再フレーム化する方法。デフォルトでは、「選択」を維持したい ありがとう

4

1 に答える 1