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

我对AngularJS非常新，但我很喜欢它的方法论，但它带有一些我仍然适应的思维方式更改。（我正在使用Coffeescript和Haml，请让我知道，如果你看到任何我应该/不会做的事，这与我的问题无关 - 再一次，我对Angular非常陌生。）如何在AngularJS中管理资源的多个元素

我有一个建立这样的资源：

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和REST风格的控制器。现在我想要在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。$更新（）。我的Rails控制器返回一个JSON service_request变量，它清除了我的扩展变量。废话。

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

什么是更好的方式来管理这些非数据库变量仅仅意味着仍然需要的角度壮观的双向优势结合浏览器中使用？

谢谢！让我知道你是否需要更多的代码。 =）

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

对于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)"}

来源

2013-02-15 mikeborgh

你可以做的就是准备其与数据对象相关联的独立的标志物。我会假设数据对象具有唯一的id，名为“id”。

在您的视图：

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

在你的控制器：

$scope.flags = {}; 

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

来源

2013-02-15 07:26:40 Tosh

非常感谢！感谢是一个简单而优雅的解决方案。像魅力一样工作。 – mikeborgh 2013-02-15 07:45:54

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

回答

相关问题