Question

我正在研究我的AngularFire项目。我有一个像https://dinosaur-facts.firebaseio.com/这样的数据库。我正在做的是首先像恐龙孩子一样搜索关键词，例如“linhenykus”，并将其键和值存储到其他$ scope变量中。
我在控制器中的代码

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs" + "/" + $scope.dinoID); //$scope.dinoID is variable containg dino keys  

$scope.detRef = $firebaseArray(ref);

我得到的输出就像

    [{"$value":-85000000,"$id":"appeared","$priority":null},{"$value":0.6,"$id":"height","$priority":null},{"$value":1,"$id":"length","$priority":null},{"$value":"theropoda","$id":"order","$priority":null},{"$value":-75000000,"$id":"vanished","$priority":null},{"$value":3,"$id":"weight","$priority":null}]

如何获取密钥和值？

Answer 1

使用ngRepeat指令，如下所示：

<tr ng-repeat="obj in array track by $index">

要过滤数组，您可以使用Angular的{{3}}：

<tr ng-repeat="obj in array | filter: criteria track by $index">

这是一个示例：

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', '$filter'];

  function MainCtrl($scope, $filter) {
    $scope.criteria = {};
    $scope.array = [  
       {  
          "$value":-85000000,
          "$id":"appeared",
          "$priority":null
       },
       {  
          "$value":0.6,
          "$id":"height",
          "$priority":null
       },
       {  
          "$value":1,
          "$id":"length",
          "$priority":null
       },
       {  
          "$value":"theropoda",
          "$id":"order",
          "$priority":null
       },
       {  
          "$value":-75000000,
          "$id":"vanished",
          "$priority":null
       },
       {  
          "$value":3,
          "$id":"weight",
          "$priority":null
       }
    ];

    $scope.getObj = function(value, id) {
      $scope.obj = $filter('filter')($scope.array, {
        "$value": value,
        "$id": id
      })[0];
    }

     $scope.getObj("theropoda", "order");
  }
})();

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input type="text" placeholder="Search by value" ng-model="criteria.$value">
  <input type="text" placeholder="Search by id" ng-model="criteria.$id">
  <!-- Note that this button is just as an example to change the object displayed below -->
  <button type="button" ng-click="getObj()">Change the value of object</button>
  <hr>
  Obj: <span ng-bind-template="Value: {{obj.$value}}, Id: {{obj.$id}}"></span>
  <p></p>
  <table width="100%">
    <thead>
      <tr>
        <th>Value</th>
        <th>Id</th>
        <th>Priority</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="obj in array | filter: criteria track by $index">
        <td ng-bind="obj.$value"></td>
        <td ng-bind="obj.$id"></td>
        <td ng-bind="obj.$priority"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

AngularFire搜索关键节点并分配给变量

1 个答案: