角度，选择，设置默认值答案

【问题标题】：Angular, Select, Set Default角度，选择，设置默认值
【发布时间】：2014-01-08 16:41:49
【问题描述】：

我知道这可能已被多次询问，但我觉得我做的一切都是正确的，但我似乎无法为使用 AngularJS 的选择设置默认选项。

我正在使用： AngularJS、Angular-UI-router、Bootstrap

相关 HTML：

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

果汁服务：

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

在我的控制器中：

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';
        }
    }
}]);

一切都预先填充，选择框包含所有项目，但它不预先选择项目。它以一个空白选择选项开始。

$scope.companies 变量已设置并填充选择选项的事实使我认为 $http.get() 已经成功返回，因此 $scope.selectedCompany 也应该已经填充。不过，我可能错了。

如果有人能看出我哪里出了问题，并能启发我，那就太棒了。

【问题讨论】：

标签： javascript angularjs angular-ui

【解决方案1】：

$scope.juice.company 是一个对象，从 javascript 的角度来看，它不是包含公司的数组的一部分。您必须自己在公司中找到正确的公司。例如，假设公司有一个属性 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;
}

【讨论】：

效果很好。我猜两个具有相同签名的对象不等于同一个对象。

【解决方案2】：

你可以在select中使用id作为模型，然后在控制器中设置：

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>

【讨论】：