Как отобразить данные, полученные из Firebase, в приложение AngularJS
У меня есть угловое приложение, которое получает данные из firebase, но я не знаю, как отобразить данные в представлении. Данные, полученные из firebase, являются Объектом, имеющим 3 Объекта с этими именами: KoAJWEHt6E2krjLgSuB,KoAJWEPc0seRt95JqoH,KoAJWEQDiAsOWwvL2QZ (эти имена являются уникальными ключами, назначенными firebase). Эти 3 объекта содержат данные для объявлений каждого человека. Теперь я не знаю, как отобразить эти данные в представлении. Я уже пробовал ng-repeat, но он ничего не показывает и в консоли нет ошибок.
контроллер:
myApp.controller("classifiedsCtrl",["$scope","$http","$mdSidenav","$mdToast","$mdDialog","$firebaseArray",function($scope,$http,$mdSidenav,$mdToast,$mdDialog,$firebaseArray){
var ref=firebase.database().ref().child('persons');
ref.on('value',function(snapshot){
$scope.classifieds=snapshot.val();
console.log($scope.classifieds);
});
}]);
Вид контроллера:
<md-card flex="30" ng-repeat="classified in classifieds | filter:classifiedsFilter" class="record">
<md-card-content>
<div class="classified-info" ng-show="!showContact">
<h2 class="md-title">{{classified.title | uppercase}}</h2>
<h3>{{classified.price | currency}}</h3>
<p>{{classified.description}}</p>
</div>
<div class="classified-contact" ng-show="showContact">
<p>
<md-icon class="mdi mdi-account"></md-icon>{{classified.name}}</p>
<p>
<md-icon class="mdi mdi-phone"></md-icon>{{classified.phone}}</p>
</div>
<div layout="row">
<md-button ng-click="showContact=true" ng-show="!showContact">Contact</md-button>
<md-button ng-click="showContact=false" ng-show="showContact">Details</md-button>
<md-button ng-click="showAdmin=true" ng-show="!showAdmin">Admin</md-button>
<md-button ng-click="showAdmin=false" ng-show="showAdmin">Close</md-button>
</div>
<div class="classified-admin" ng-if="showAdmin">
<h3>Admin</h3>
<div layout="row">
<md-button class="md-raised md-primary">Edit</md-button>
<md-button ng-click="deleteClassified($event,classified)" class="md-raised md-warn">Delete</md-button>
</div>
</div>
</md-card-content>
</md-card>
1 ответ
Передайте свою ссылку на базу данных в базу данных, как показано ниже
var ref=firebase.database().ref().child('persons');
$scope.ref=$firebaseArray(ref);
$scope.ref.$loaded().then(function(){
$scope.classifieds=[];
$scope.classifieds=$scope.ref;
})
и затем дождитесь ссылки для загрузки, поместите условие в HTML, как показано ниже
<div ng-show="classifieds.length>0">
//put your md-card inside this div.
</div>