角度，选择，设置默认

Question

I know this has probably been asked multiple times, but I feel like I am doing everything right, but I can't seem to set the default option for a select using AngularJS.

I'm using : AngularJS, Angular-UI-router, Bootstrap

Relevant HTML :

<select ng-model="selectedCompany" ng-options="c.name for c in companies" class="form-control"></select>

Juice Service :

vapelog.factory('Juices', function($http, $q){
    var Juices = {
        get : function() {
            var promise = $http.get('/juices').then(function(data){
                return data.data;
            });

            return promise;
        },
        show : function(id) {
            var deferred = $q.defer();

            $http.get('/juices/'+id).then( function ( juice ) {
                $http.get('/companies').then( function ( companies ) {

                    juice.companies = companies;
                    deferred.resolve( juice );

                }, function getAcctError() { deferred.reject(); } );
            }, function getUserError() { deferred.reject(); } );

            return deferred.promise;
        },
    }

    return Juices;
});

In my controller :

vapelog.controller('JuiceDetailCtrl', ['$scope','$stateParams','Juices',function($scope, $stateParams, Juices) {
    var id = $stateParams.juice;
    $scope.juice = {};
    $scope.selectedCompany = {};

    Juices.show(id).then(function(juice){
        $scope.juice = juice.data;
        $scope.companies = juice.companies.data;
        $scope.reviews = $scope.juice.reviews;
        $scope.selectedCompany = $scope.juice.company;
    }, function(){
        console.log('error');
    });

    $scope.tfIcon = function(item){
        if(item == "1"){
            return 'glyphicon-ok';
        } else {
            return 'glyphicon-remove';
        }
    }
}]);

Everything prepopulates, the select box contains all the items, but it doesn't pre-select the item. It starts with a blank select option.

The fact that the $scope.companies variable is set and populating the select options makes me think that the $http.get() has already returned successfully, and therefore the $scope.selectedCompany should already be populated too. I may be wrong, though.

If someone can see where I am going wrong, and can enlighten me, that would be awesome.

Answer 1

$scope.juice.company is an object that is from the javascript point of view not part of the array that contains the companies. You have to find the correct companie by yourself in the companies. For exapmle, assumed that the company has a property id:

$scope.selectedCompany = findCompany($scope.juice.company, $scope.companies);

function findCompany(theCompany, companies){
    var result;
    angular.forEach(companies, function(companieInArray){
         if(companieInArray.id === theCompany.id){
             result = companieInArray;
         }    
    });

    return result;
}

Answer 2

You can use the id as the model in the select and then set this in the controller:

app.controller('Ctrl', function ($scope) {

    var opentr;

    $scope.juices = [];
    $scope.juice = 2;


    $scope.juices.push({"id":  1 , "fruit": "orange"});
    $scope.juices.push({"id":  2 , "fruit": "apple"});
    $scope.juices.push({"id":  3 , "fruit": "pear"});
    $scope.juices.push({"id":  4 , "fruit": "pinapple"});

});

html:

{{ juice }}
<select ng-model="juice" ng-options="juice.id as juice.fruit for juice in juices"></select>