如何使用firebase和angularfire立即更新数据列表中的项目?

时间:2014-08-09 17:20:57

标签: javascript angularjs firebase angularfire

我有以下代码生成firebase中的项目列表,我可以通过单击按钮更新每个项目。但我想使用$ bind立即更新列表中的特定项目,而不是每次都单击提交。

我目前正在使用以下脚本更新列表(jsfiddle here:http://jsfiddle.net/chrisguzman/ryuvg6bz/),这需要用户按提交,但我希望它能够立即显示列表中的项目

HTML

<section ng-app ="myapp" ng-controller="MyController">

<div ng-repeat= "(id,item) in data">
        <input ng-model="item.comment"></input>
        <button type="submit" ng-click="AddComment(id)">Comment</button>
</div>

</section>

的Javascript

angular.module("myapp", ["firebase"])
    .controller('MyController',function MyController($scope, $firebase) {
    var ref = new Firebase("https://helloworldtest.firebaseio.com");

    $scope.data = $firebase(ref);


    $scope.AddComment = function (id) {
        $scope.data.$save(id)}


});

我的尝试是以下

<section ng-app ="myapp" ng-controller="MyController">

<div ng-repeat= "(id,item) in data">
        <input ng-model="item.comment"></input>
</div>

</section>

Javascript

angular.module("myapp", ["firebase"])
    .controller('MyController', function MyController($scope, $firebase) {
    var ref = new Firebase("https://helloworldtest.firebaseio.com");

    $scope.data = $firebase(ref);

    function (id) {
        var ref = new Firebase("https://helloworldtest.firebaseio.com/" + id + "/comment");
        $firebase(ref).$bind($scope, "comment");

    }


});

1 个答案:

答案 0 :(得分:1)

您可以使用ng-change立即保存数据:

<div ng-repeat="(id,item) in data">
    <input ng-model="item.comment" ng-change="AddComment(id)"></input>
</div>

示例JSFiddle: http://jsfiddle.net/snk9Ld23/1/