Обновление поля в Firebase по щелчку в AngularJS

Question

У меня есть таблица, которая извлекает данные из Firebase. Каждая строка внутри таблицы имеет действия, которые можно щелкнуть, чтобы выполнить определенную функцию. Одно из действий - просто установить строку как завершенную. В моей базе данных firebase есть поле, в котором содержится ключ true или false для значения read. Мне нужно щелкнуть по значку (галочку) и обновить значение в firebase на основе действия.

У меня есть следующие до сих пор:

var myProducts = new Firebase('https://url-to-firebase-db/products'); 
$scope.products = $firebaseArray(myProducts); 

$scope.products = $firebaseArray(ref); 
$scope.markCompleted = function markCompleted(product) { 
    product.read = !product.read; 
    $scope.products.$save(product); 
}; 

В конце пользовательского интерфейса:

<tbody ng-controller="ProductsCtrl"> 
    <tr ng-repeat="product in products | orderBy: 'category'"> 
    <td>{{ product.category}}</td> 
    <td>{{ product.task}}</td> 
    <td><img class="user" src="{{ product.user }}"></td> 
    <td>{{ product.status }}</td> 
    <td>{{ product.due | date:'MMMM dd' }}</td> 
    <td>{{ product.notes }}</td> 
    <td>{{ product.read }}<a class="fa fa-check" ng- 
          click="markCompleted(product)"></a> 
    <i class="fa fa-comment"></i> 
    <i class="fa fa-bars"></i> 
    </td> 
    </tr> 
</tbody> 

Я не уверен, как вызвать действие, чтобы обновить поле в Firebase хотя.

Answer 1

Попробуйте создать метод, который принимает в product и указать его в шаблоне:

<tbody ng-controller="ProductsCtrl"> 
    <tr ng-repeat="product in products | orderBy: 'category'"> 

    <td> 
     <button class="fa fa-check" ng-click="markCompleted(product)" > 
     </button> 
    </td> 

    </tr> 
</tbody> 

Тогда в контроллере вы можете изменить значение product.read, и сохранить его с помощью $firebaseArray:

$scope.products = $firebaseArray(ref); 
$scope.markCompleted = function markCompleted(product) { 
    product.read = !product.read; 
    $scope.products.$save(product); 
};