Угловая, выберите, установите значение по умолчанию

Question

Я знаю, что это, вероятно, было задано несколько раз, но я чувствую, что делаю все правильно, но я не могу установить параметр по умолчанию для выбора с помощью AngularJS.

Я использую: AngularJS, угловато-UI-маршрутизатор, 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'; 
     } 
    } 
}]); 

Всё prepopulates, то выберите поле содержит все элементы, но он не заранее выбрать пункт. Он начинается с пустой опции выбора.

Тот факт, что переменная $ scope.companies задана и заполняет опции выбора, заставляет меня думать, что $ http.get() уже успешно возвращен, и поэтому объект $ scope.selectedCompany уже должен быть заполнен. Хотя я могу ошибаться.

Если кто-то может видеть, где я ошибаюсь, и могу просветить меня, это было бы потрясающе.

Answer 1

$ scope.juice.company - это объект, который с точки зрения javascript не является частью массива, содержащего компании. Вы должны найти правильную компанию самостоятельно в компаниях. Для exapmle, предполагается, что компания имеет свойство 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

Вы можете использовать идентификатор в качестве модели в избранных, а затем установите это в контроллере:

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>