如何在 AngularJS 中管理多个资源元素

Question

我对 AngularJS 很陌生，但到目前为止我喜欢它的方法，但它带来了一些我仍在适应的心态变化。 （我正在使用 Coffeescript 和 Haml。如果您看到与我的问题无关的我应该/不应该做的任何事情，请告诉我 - 再说一次，我对 Angular 很陌生。）

我有一个这样设置的资源：

app.factory "ServiceRequest", ["$resource", ($resource) ->
  $resource("/service_requests/:id", {id: "@id"}, {update: {method: "PUT"}})
]

app.controller "ServiceRequestController", ["$scope", "ServiceRequest", ($scope, ServiceRequest) ->
  $scope.service_requests = ServiceRequest.query()

没什么太花哨的，特别是如果您熟悉 Rails 和 RESTful 控制器。现在我想在 index.html.haml 页面上显示它们..

.service-request{'ng-repeat' => 'service_request in service_requests'}
  .upper
    #...
    %a.btn{:href => "", 'ng-click' => "toggleExpand(service_request)"}
  .lower{'ng-show' => 'service_request.expanded'}
    #...

注意调用 toggleExpand(service_request) 的按钮。

$scope.toggleExpand = (service_request) ->
  service_request.expanded = not service_request.expanded

所以.. 这一直有效，直到我单击另一个更改变量的按钮，然后单击 service_request.$update()。我的 Rails 控制器返回一个 JSON service_request 变量，该变量清除了我的扩展变量。废话。

$scope.acceptRequest = (service_request) ->
  service_request.state_change = "accept"
  service_request.$update()

有什么更好的方法来管理这些仅用于仍然利用 Angular 壮观的双向绑定的浏览器的非数据库变量？

谢谢！如果您需要更多代码，请告诉我。 =)

// 这就是我为解决问题所做的。

对于 JS：

$scope.init = () ->
  $scope.toggleFlags = {}
  angular.forEach $scope.service_requests, (service_request) ->
    $scope.toggleFlags[service_request.id] = false

$scope.toggleExpand = (id) ->
  if not $scope.toggleFlags
    $scope.init()
  $scope.toggleFlags[id] = not $scope.toggleFlags[id]

对于 HTML：

%a.btn{:href => "", 'ng-click' => "toggleExpand(service_request.id)"}

Answer 1

你可以做的是准备单独的标志对象，它与 数据对象。我会假设数据对象具有名为“id”的唯一 ID。

在你看来：

<button ng-click="toggleExpand(service_request.id)"> toggle </button>

在您的控制器中：

$scope.flags = {};

$scope.toggleExpand = function(id) {
  flags[id] = !flags[id];
};