Angular: ng-options inserts an empty element

Question

So, I've been looking around to understand why this happens. From what I understand after going through couple of other questions on Stackoverflow and other websites is that, this problem is caused because ng-model is being initialised to a value not present in the list of options.

But this is not an issue on the first drop-down in my code and I am not able to figure out what's going on wrong for the other 3 drop-downs.

Here is my fiddle - https://jsfiddle.net/7w4owwsk/6/

The markup:


   
    
    
        {{item}}
    
    
    
    

    
    
        
        
            Subnet
            
            
            
        
        
            Type
            
            
            
        
        
            Team
            
            
            
        
        
            Machine Type
            
            
            
        
        
            
            
            
        
        
        
        
            80% Complete Working on it..
        
        
        
        
        
            
        
        
        
        
            
            I.P Address
            Owner
            Type
            Team
            Remarks
            Actions
            
        
        
            
            {{item.individualIP}}
            {{item.owner}}
            {{item.serverType}}
            {{item.teamName}}
            {{item.remarks}}

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;
    };
});
})();

The drop-down initialisation works as intended for the Subnet options and defaults to showing Select as intended.

Can someone take a look and help with understanding the issue here?

Lazar Yanchev · Accepted Answer

Set this value to ng-options expression ng-options="y for (x, y) in ...".

With the notation x as y in (x, y) you are using the key of the source object 'x' for binding to the model and the value of the object 'y' for visualizing the options. In the first case it works, because the name of the key and the value are equal.

Angular: ng-options inserts an empty element

Answers (2)

Related Questions