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

标签 javascript angularjs firebase angularfire

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

我目前正在使用以下脚本(此处为 jsfiddle: 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");

    }


});

最佳答案

您可以使用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/

关于javascript - 如何使用 firebase 和 angularfire 立即更新数据列表中的项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25221156/

相关文章:

java - 从 Firebase 数据库中删除特定值

node.js - 使用 Busboy 在 Node.js 中将 Multipart/form-data 转换为 JSON

javascript - 如何使用 javascript 更改 html 视频源?

javascript - AngularJS - 我可以使用指令更改 View 中 ng-repeat 的值/表达式吗

javascript - 获取正整数的负数求和结果

javascript - 即使使用单引号,ng-include 也不起作用

javascript - 尝试使用 Canvas 工作来获取 setTimeout

javascript - 单击按钮时不会调用函数,但会在表单加载时调用函数

javascript - 使用元素计数器的 angular.element 问题

.net - 使用 Firebase/Pusher/Pubnub 在 .Net 桌面应用程序和 Web 应用程序之间来回推送通知