Не удалось связать данные бэкэнд в угловых и firebase

Question

Я пытаюсь связать данные из базы данных firebase с раскрывающимся списком.

Мои данные Бэкэнд

[{"_id":"5459beb12b7aedb40e000003", 
    "vendorId":"prem123", 
    "vendorName":"karn prem", 
    "vendorContactNo":7897798789779}, 
{"_id":"545b3523bfc687100c000002", 
    "vendorId":"wfwf", 
"vendorName":"wfwf", 
    "vendorContactNo":3245353}] 

МОЯ Контроллер

app.controller('VenueregCtrl', [ '$scope', '$location', '$http', 
    > 'AuthServ', 'growl', '$firebase', 
    >   function($scope, $location, $http, AuthServ, growl, $firebase){ 
    >   var ref = new Firebase("https://eventexchange.firebaseio.com"); 
    >  
    >   $scope.init = function() 
    >   { 
    >    $scope.user = AuthServ.getUser(); 
    >    $scope.venue = {}; 
    >    $scope.token = $scope.user.token; 
    >    $scope.vendor_dtls = $firebase(ref); 
    >    console.log("test",$scope.vendor_dtls); 
    >    if($scope.user.scope == 'vendor') 
    >    { 
    >     $scope.venue.vendor = $scope.user.user; 
    >    } 
    >    else 
    >    { 
    >     $http.get('/vendor',{ 
    >       headers: AuthServ.getAuthHeader() 
    >      }) 
    >      .success(function (data, status) { 
    >  
    >       var x = ref.child("vendors"); 
    >       x.remove(); 
    >       angular.forEach(data,function(value, key){ 
    >       x.push({ 
    >        vendorName : value.vendorName 
    >       }); 
    >      }) 
    >      ref.on("child_added", function(snapshot) { 
    >         $scope.vendor_dtls = snapshot.val();      
    >        console.log($scope.vendor_dtls); 
    >       
    >      }); 
    >       // console.log($scope.newPost); 
    >  
    >     }) 
    >  
    >    } 
    >    if(!$scope.user) { 
    >     $location.path('/signin'); 
    >    } 
    >   }; 
    >   $scope.init(); 
    >  
    >   $scope.submit = function(venue_dtls,validity) 
    >   { 
    >    $scope.submitted=true 
    >    if(validity) 
    >    { 
    >     venue_dtls.events = venue_dtls.events.split(",") 
    >     $http.post('/venue',venue_dtls, 
    >      {headers: AuthServ.getAuthHeader()}) 
    >     .success(function (data, status) { 
    >      $location.path('app/new-enquiries'); 
    >     }) 
    >     .error(function (data, status) { 
    >     }); 
    >    } 
    >   }; 

>  
>   $scope.reset = function() 
>   { 
>    $scope.venue = {}; 
>    if($scope.user.scope == 'vendor') 
>    { 
>     $scope.venue.vendor = $scope.user.user; 
>    } 
>    $scope.submitted = false; 
>    growl.addSuccessMessage('Form reset succesfully'); 
>   }; 
>  }]) 

Мой HTML файл

<div class="wrapper-md"> 
    <div class="panel panel-default"> 
    <div class="panel-heading wrapper b-b b-light"> 
     <h4 align='center' class="font-thin m-t-none m-b-none text-muted">Venue Registration</h4> 
    </div> 
    <div class="panel-body"> 
     <div class="form-horizontal ng-pristine ng-valid ng-valid-required" > 
     <form name="new_venue" novalidate> 
      <div class="col-md-12"> 
      <div class="form-group"> 
       <label class="col-lg-2">Vendor</label> 
       <div class="col-lg-10" ng-if="user.scope == 'vendor'"> 
       <input type="text" ng-model="venue.vendor" readonly/> 
       </div> 
       <div class="col-lg-10" ng-if="user.scope == 'admin'"> 
       <select ng-model="venue.vendor" style="width:174px;height:26px;" ng-options="vendor.vendorName for vendor in vendor_dtls" name="vendor" required> 
        <option value="">choose a vendor</option>{{ vendor_dtls}} 
       </select></br> 
       <span style="color:red;" ng-if="new_venue.vendor.$error.required && submitted">*Vendor is not choosed 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-lg-2">Venue Id</label> 
       <div class="col-lg-10"> 
       <input type="text" ng-model="venue.venueId" name="venueId" required/></br> 
       <span style="color:red;" ng-if="new_venue.venueId.$error.required && submitted">*Give a venue Id 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-lg-2">Events</label> 
       <div class="col-lg-10"> 
       <input type="text" ng-model="venue.events" name="events" required/></br> 
       <span style="color:red;" ng-if="new_venue.events.$error.required && submitted">*Give a event type 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-lg-2">Location</label> 
       <div class="col-lg-10"> 
       <input type="text" ng-model="venue.location" name="location" required/></br> 
       <span style="color:red;" ng-if="new_venue.location.$error.required && submitted">*Fill the location field 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-lg-2">Capacity</label> 
       <div class="col-lg-10"> 
       <input type="text" ng-model="venue.capacity" name="capacity" ng-pattern="/^[0-9]{1,7}$/" required/></br> 
       <span style="color:red;" ng-if="new_venue.capacity.$error.required && submitted">*Fill the capacity field</span> 
       <span style="color:red;" ng-if="new_venue.capacity.$error.pattern">*Invalid entry</span> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-lg-2">Price</label> 
       <div class="col-lg-10"> 
       <input type="text" ng-model="venue.price" name="price" ng-pattern="/^[0-9]{1,7}$/" required/></br> 
       <span style="color:red;" ng-if="new_venue.price.$error.required && submitted">*Fill the price field</span> 
       <span style="color:red;" ng-if="new_venue.price.$error.pattern">*Invalid entry</span> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-lg-2">Currency</label> 
       <div class="col-lg-10"> 
       <input type="text" ng-model="venue.currency" name="currency" required/></br> 
       <span style="color:red;" ng-if="new_venue.currency.$error.required && submitted">*Fill the currency field 
       </div> 
      </div> 
      </div> 
      <div class="form-group" style="margin-top:50px;"> 
      <div class="col-md-2"> 
       <button ng-click="submit(venue, new_venue.$valid)" class="btn btn-primary btn-block">Submit</button> 
      </div> 
      <div class="col-md-2"> 
       <button ng-click="reset()" class="btn btn-primary btn-block">Reset</button> 
      </div> 
      <!-- <div class="col-md-2"> 
       <a class="btn btn-primary btn-block">Back</a> 
      </div> -->   
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
</div>   

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

Answer 1

изменение

$scope.vendor_dtls = $firebase(ref);

к

$scope.vendor_dtls = $firebase(ref).$asArray();

и

ref.on("child_added", function(snapshot) { $scope.vendor_dtls = snapshot.val(); console.log($scope.vendor_dtls); });

к

ref.on("child_added", function(snapshot) { var vendor_dtl = snapshot.val(); console.log(vendor_dtl); $scope.vendor_dtls.push(vendor_dtl); });