0
これはなぜ起こったのかを知りたいと考えています。 Stackoverflowやその他のWebサイトに関する他の質問をいくつか通過した後で理解していることは、ng-modelがオプションのリストにない値に初期化されているために発生します。角度：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を示すにサブネットオプションとデフォルトすることを目的として、ドロップダウン初期の作品思惑通り。
誰かが見て、ここで問題を理解するのに役立つことができますか？