Question

对于Ionic和Firebase来说，这是一个新手，并且正在尝试创建一个示例项目，我尝试使用对值的检查从Firebase数据库进行查询。为了清楚说明，因为Firebase不允许SELECT查询中的WHERE子句像条件一样，所以试图学习如何处理它。

Here is a snapshot of my Firebase database.

我的目的只是在我的View上显示数组中地址值为700030的数据，就像我们在AngularJS中使用ng-repeat一样。

var app = angular.module('starter', ['ionic', 'firebase'])

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.controller('MainCtrl', function($scope, $firebaseArray){
       
	var ref = new Firebase('https://helpee-70271.firebaseio.com');
	
	$scope.result = $firebaseArray(ref);
	
	ref.orderByChild("address").on("child_added", function(data) {
	   console.log("Initially :" + JSON.stringify($scope.result));
       	   //console.log(data.val().address);
	   if(data.val().address == "700030"){
	      console.log(data.val().address);
	      $scope.result.push(data.val());
	   }
	   console.log(JSON.stringify($scope.result));
	});
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!--Firebase addition start -->
    <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <!--Firebase addition end -->
    
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title text-center">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller="MainCtrl">
         <div>
	    <div ng-repeat ="results in result">
	         <div>{{results.name}}</div>
		     <div>{{results.phNumber}}</div>
	    </div>
	 </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

这是我的代码段。我得到的问题是，虽然正确地检查和检索数据但在View中看到包含所有元素的数组而不管地址检查是否首先打印，然后打印应该打印的值。

Here is the snapshot of the View and the console of the browser

任何人都可以帮助我如何纠正这个问题，并解释我哪里出错了？因为我真的很陌生并愿意学习，所以会感激不尽。在此先感谢!!

Answer 1

你的问题是你正在填充你的阵列两次。首先使用这一行的所有数据：

$scope.result = $firebaseArray(ref);

其次，您在child_added侦听器中添加实际需要的数据：

$scope.result.push(data.val());

因此，简单的解决方案是将第一行更改为：

$scope.result = [];

使用Ionic在Firebase中进行异步数据检索时出现问题

1 个答案: