Angular 显示来自 Firebase 的列表

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>

上面的形式是在调用controller...

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 的模板中，您可以在 situations 数组上执行 ng-repeat。

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

{{ situation.situation }} 部分因为命名看起来很别扭。如果您将属性 situation 更改为 text 或 title 之类的内容，它将看起来像：

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

Angular 显示来自 Firebase 的列表

Angular Display lists from Firebase

javascript

angularjs

firebase

angularfire