Question

我在Firebase中的数据看起来像这样......

evalu8er
    situations
        -K6rM12D-0nt4fJH_QcA
            situation: "Test"
        -K6rPoHiUl2N2JOSWXww
            situation: "Test2"
        -K6rPqbkBHJ-K8znVzay
            situation: "Test3"

我已经通过这样的表格从HTML页面插入了数据......

<div class="form-group">
<label for="situation">Add a situation</label>
<input type="text" class="form-control" id="situation" placeholder="Situation" ng-model="situation">
</div>
<button type="submit" class="btn btn-default pull-right" ng-click="add_situation()"><i class="fa fa-cog fa-spin" ng-show="loading"></i> Add     </button>
</form>

以上表格正在呼叫控制器......

app.controller("situations", ["$scope", function ($scope) {
    $scope.add_situation = function () {
        var situation = $scope.situation;
        var ref = new Firebase("https://evalu8er.firebaseio.com/situations");

        ref.push().set({
            situation: situation
        });
    };
  }
]);

现在我想让每个情况都回到页面，这对我来说都是错误的。

在与上面相同的控制器内，我添加了这个....

var ref = new Firebase("https://evalu8er.firebaseio.com/user/situations/");
ref.on("value", function(snapshot) {
$scope.display_situatoins = snapshot.val(); 
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});

在我添加的HTML页面上

<li data-ng-repeat="x in display_situatoins">
    {{ x }}
</li>

当页面加载时，在我在表单字段中输入内容之前，它不会显示数据

问题1/3） 如何在页面加载时显示数据？

当它加载时，它看起来像这样......

{"situation":"Test"}
{"situation":"Test2"}
{"situation":"Test3"}

我想要的只是显示这样的情况列表..

Test
Test2
Test3

问题2/3） 我如何只显示上述情况值？

当我添加一个新项目时，它会在底部列出，如何在顶部的新项目中订购列表？

问题3/3） 如何订购列表以便首先显示新项目？

Answer 1

<强> Use AngularFire for synchronized collections.

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController);

function MyCtrl($scope, rootRef, $firebaseArray) {
   $scope.situations = $firebaseArray(rootRef.child('situations');
}

然后在MyCtrl的模板中，您可以在ng-repeat数组上执行situations。

<li ng-repeat="situation in situations">
    {{ situation.situation }}
</li>

由于命名，{{ situation.situation }}部分看起来很尴尬。如果您将属性situation更改为text或title，则会显示如下：

<li ng-repeat="situation in situations">
    {{ situation.title }}
</li>

Firebase中的角度显示列表

1 个答案: