我正在使用 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>
在控制器.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' }
};
});
})();
我错过了什么？另外，如果没有设置选中的选项，如何重新构建上面的代码。默认情况下，我想保留“选择”谢谢
错误很少，
(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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句