angularjs - 如何使用 Firebase + Angular 编辑数组中的对象

Question

在我的 Firebase + Angular（带有 AngularFire）应用程序中，我有一组对象，这些对象被格式化为带有 ng-repeat 的表格。每一行都是一个不同的对象。

我想添加选项以将特定对象“分配”给当前使用 Firebase 简单登录登录的用户。我添加了类似于 deleteItem(item) 的函数 assignTo(item) 但这对我不起作用。

我究竟做错了什么？

<div ng-controller="itemsCtrl">
  <table>
    <tr ng-repeat="item in items">
    <!-- table row aka object starts here -->
    <td>
      {{ item.assignedTo}}
    </td>
    <td>
      <form ng-submit="assignTo(item)">
       <button ng-click="items.$save(item)"class="btn btn-default">Assign</button>
      </form>               
        </td>
        <td>
          <form ng-submit="deleteItem(item)">
        <button ng-click="items.$remove(item)">Remove</button>
        </form>
      </td>
    </tr>
  </table>
</form>
<!-- table row aka object ends here -->
...
</div>

这是我的控制器

app.controller("itemsCtrl", ["$scope", '$rootScope', "$firebase", "simpleLogin",
   function($scope, $rootScope, $firebase, simpleLogin) {
     var ref = new Firebase("https://--------.firebaseio.com/");
     $scope.items = [];
     var sync = $firebase(ref);
     $scope.items = sync.$asArray();
     $rootScope.auth = simpleLogin;

    ...

     $scope.assignTo = function(assignedTo) {
       $scope.items[i].assignedTo = $rootScope.auth.user.displayName;
       $scope.items[i].$save(i)
     };
   }
 ]);

更新：这解决了问题

<tr ng-repeat="(key, item) in items">
...
<td>
<button ng-click="assignTo(key)" class="btn btn-default">Assign</button>
</td>

和

 $scope.assignTo = function(key) {
   console.log($scope.items[key].assignedTo);
   $scope.items[key].assignedTo = $rootScope.auth.user.displayName;;
   $scope.items.$save(key);
 };

Answer 1

由于您在这里使用数组，因此使用(key, item)并不理想（这是用于迭代对象的构造）。

Angular 提供了在上面的示例$index中表示的特殊变量i：

<button ng-click="assignTo($index)">Assign</button>

此外，您在拨打电话时已经拥有该项目，因此无需通过键或索引查找它（$save 也将接受实际项目来代替 index ）：

<tr ng-repeat="item in items">
  <td>
    <button ng-click="assignTo(item)">Assign</button>
  </td>

$scope.assignTo = function(item) {
   item.assignedTo = $rootScope.auth.user.displayName;;
   $scope.items.$save(item);
 };