Question

在我的离子2应用程序中，我将一些信息推送到Firebase的实时数据库，在另一个页面中我想根据搜索检索该数据。

以下是我的Firebase参考的样子：

---Bloods

     -----id

这里是我的search.html，而不是呈现加载屏幕，我想列出所选数据（例如A rh +，女性）

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>
      Search
    </ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>


  <ion-list>
  <ion-item>
    <ion-label>Blood Type</ion-label>
    <ion-select [(ngModel)]="bloodtype">
      <ion-option value="ap">A Rh+</ion-option>
      <ion-option value="an">A Rh-</ion-option>
      <ion-option value="bp">B Rh+</ion-option>
      <ion-option value="bn">B Rh-</ion-option>
      <ion-option value="abp">AB Rh+</ion-option>
      <ion-option value="abn">AB Rh-</ion-option>
      <ion-option value="zp">0 Rh+</ion-option>
      <ion-option value="zn">0 Rh-</ion-option>
    </ion-select>
  </ion-item>



<ion-item>
    <ion-range min="0" max="100" [(ngModel)]="range" color="secondary">
      <ion-label range-left>0km</ion-label>
      <ion-label range-right>100km</ion-label>
    </ion-range>
  </ion-item>

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="male">Male</ion-option>
    <ion-option value="female">Female</ion-option>
  </ion-select>
</ion-item>



</ion-list>

<button ion-button full icon-left (click)="presentLoading()">
  <ion-icon name="search"></ion-icon>
  Search
</button>



</ion-content>

我怎样才能做到这一点？

Answer 1

This is demo code for search functionality, i was use angular.js for this. Edit this code as per your requirement.

Html file:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

  <div ng-app = "myApp" ng-controller = "myCtrl">

  <br>
  <br>

  Enter text for search in table : <input type="text" placeholder="enter text here" ng-model = "test.name">

  <br>
  <br>


 <table border="1" width="100%" >

   <tr>

    <td align="center">Name</td>

    <td align="center">Work</td>

   </tr>

  <tr  ng-repeat  = 'x in names | filter : test.name | filter : test.work'>

      <td >{{x.name | myFilter}}</td>

      <td >{{x.work | myFilter}}</td>

  </tr>

 </table>


  </div>

<script src = "JS.js">

</script>

</body>
</html>

Controller file :

var app = angular.module("myApp",[]);

app.controller("myCtrl",function($scope){

  $scope.names = [{name : 'Nivesh',work : 'fokta'},
  {name : 'hello',work : 'personal'},
  {name : 'nivesh',work : 'marketiing'},
  {name : 'dinesh',work : 'finance'},
  {name : 'kali',work : 'business'},
  {name : 'lalu',work : 'wood'},
  {name : 'kaliya',work : 'iron works'},
  {name : 'gabbar',work : 'NGo'}

  ];

});


app.filter('myFilter', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});

如何根据搜索从Firebase检索数据？

1 个答案: