javascript - Angular : ng-options inserts an empty element

Question

所以，我一直在四处寻找以了解为什么会发生这种情况。根据我在 Stackoverflow 和其他网站上问了几个其他问题后的理解，这个问题是因为 ng-model 被初始化为选项列表中不存在的值而引起的。

但这不是我的代码中第一个下拉列表的问题，我无法弄清楚其他 3 个下拉列表出了什么问题。

这是我的 fiddle - 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。

有人可以看一下并帮助理解这里的问题吗？

Answer 1

将此值设置为 ng-options 表达式 ng-options="y for (x, y) in ..."。

使用符号x as y in (x, y)，您可以使用源对象“x”的键来绑定(bind)到模型，并使用对象“y”的值来进行可视化选项。在第一种情况下它有效，因为键的名称和值是相等的。