我正在尝试将firebase数据库中的数据绑定到视图中的下拉列表。
我的后端数据
[{"_id":"5459beb12b7aedb40e000003",
"vendorId":"prem123",
"vendorName":"karn prem",
"vendorContactNo":7897798789779},
{"_id":"545b3523bfc687100c000002",
"vendorId":"wfwf",
"vendorName":"wfwf",
"vendorContactNo":3245353}]
MY Controller
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>
我无法绑定后端数据进行查看。我想显示所有名称应显示在下拉列表中。请帮帮我。谢谢。
答案 0 :(得分：0)
更改
$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);
});