0
所以，我一直在四處理解，爲什麼會發生這種情況。根據我在Stackoverflow和其他網站上發現的其他一些問題後所瞭解的情況，這個問題是由於ng-model被初始化爲一個不存在於選項列表中的值而導致的。Angular：ng-options插入一個空元素
但是，這不是我的代碼中的第一個下拉列表中的問題，我無法找出其他3個下拉菜單中發生了什麼問題。
這裏是我的小提琴 - https://jsfiddle.net/7w4owwsk/6/
的標記：
<div class="container main-form" ng-app="searchApp">
<div class="row" ng-controller="SearchScope as scope">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="item in scopes" ng-class="{'active': isScopeActive({{$index}})}"><a href="" ng-click="changeScope($index)">{{item}}</a></li>
</ul>
</div>
<div class="col-md-10">
<div id="form0" ng-show="isScopeActive(0)" ng-controller="SingleIPController as sip">
</div>
<div id="form1" ng-show="isScopeActive(1)" ng-controller="BulkIPController as bip">
<form class="form-horizontal panel panel-default form-panel" ng-show="searchEnabled">
<div class="form-group">
<label for="subnet" class="col-sm-2 control-label">Subnet</label>
<div class="col-sm-4">
<select class="form-control" id="subnet" ng-model="selectedSubnet" ng-options="x as y for (x, y) in trackedSubnets"></select>
</div>
</div>
<div class="form-group">
<label for="occtype" class="col-sm-2 control-label">Type</label>
<div class="col-sm-4">
<select class="form-control" id="occtype" ng-model="selectedType" ng-options="x as y for (x, y) in ipOccupancy"></select>
</div>
</div>
<div class="form-group">
<label for="team" class="col-sm-2 control-label">Team</label>
<div class="col-sm-4">
<select class="form-control" id="team" ng-model="selectedTeam" ng-options="x as y for (x, y) in teams"></select>
</div>
</div>
<div class="form-group">
<label for="machineType" class="col-sm-2 control-label">Machine Type</label>
<div class="col-sm-4">
<select class="form-control" id="machineType" ng-model="selectedMachineType" ng-options="x as y for (x, y) in machineType"></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="lookupData()">Search</button>
</div>
</div>
</form>
<div class="progress" ng-show="WIP">
<div class="progress-bar progress-bar-striped" ng-class="{'active': WIP}" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span> Working on it..
</div>
</div>
<div class="page-action" ng-hide="searchEnabled">
<button type="button" class="btn btn-default pull-left" ng-click="enableSearch()">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Modify Search
</button>
<div class="col-sm-3 col-xs-8">
<input class="form-control" type="text" placeholder="Search" ng-model="searchText" />
</div>
</div>
<table ng-show="bulkIPData" class="table table-hover">
<thead>
<tr>
<th>I.P Address</th>
<th>Owner</th>
<th>Type</th>
<th>Team</th>
<th>Remarks</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in bulkIPData | filter:searchText">
<td>{{item.individualIP}}</td>
<td>{{item.owner}}</td>
<td>{{item.serverType}}</td>
<td>{{item.teamName}}</td>
<td>{{item.remarks}}</td>
<td><span class="glyphicon glyphicon-pencil edit-icon-btn" aria-hidden="true" ng-click="updateItem(item)"></span><a ng-href="mailto:{{item.emailId}}"><span class="glyphicon glyphicon-envelope edit-icon-btn" aria-hidden="true"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
JS：
(function() {
var app = angular.module("searchApp", []);
app.factory('SubnetFact', function() {
return {
"Select": "Select",
"10.78.90": "10.78.90",
"10.78.91": "10.78.91",
"10.78.92": "10.78.92",
"10.78.93": "10.78.93",
"10.78.94": "10.78.94",
"10.78.95": "10.78.95",
"10.107.45": "10.107.45"
};
});
app.factory('OccupFact', function() {
return {
"All IPK": "All IP",
"Free IPK": "Free IP",
"Used IPK": "Used IP"
};
});
app.factory('TeamFact', function() {
return {
"ALL": "All",
"Team A": "Team A",
"Team B": "Team B",
"Team C": "Team C",
"Team D": "Team D"
};
});
app.factory('MachineTypeFact', function() {
return {
"ALL": "ALL Servers and Devices",
"A": "A",
"B": "B",
"C": "C",
"D": "D"
};
});
app.controller("SearchScope", function($scope) {
$scope.activeScope = 1;
$scope.scopes = ['Individual IP Data', 'All IP Data'];
$scope.isScopeActive = function(num) {
return num === $scope.activeScope;
};
$scope.changeScope = function(index) {
$scope.activeScope = index;
};
});
app.controller("SingleIPController", function($rootScope, $scope, $http) {
});
app.controller("BulkIPController", function($rootScope, $scope, $http, SubnetFact, OccupFact, TeamFact, MachineTypeFact) {
$scope.trackedSubnets = SubnetFact;
$scope.ipOccupancy = OccupFact;
$scope.teams = TeamFact;
$scope.machineType = MachineTypeFact;
$scope.selectedSubnet = $scope.trackedSubnets["Select"];
$scope.selectedType = $scope.ipOccupancy["All IPK"];
$scope.selectedTeam = $scope.teams["ALL"];
$scope.selectedMachineType = $scope.machineType["ALL"];
$scope.bulkIPData = null;
$scope.WIP = false;
$scope.searchEnabled = true;
$scope.enableSearch = function() {
$scope.searchEnabled = true;
};
});
})();
爲用於子網選項，並默認顯示Select下拉初始化工作如預期。
有人可以看看並幫助理解這裏的問題嗎？