2014-03-25 28 views
0

这是一个看起来很简单的任务,我有点挣扎。在ng-click上填充Angular Modal

我有一个来自ng-repeat的事件表。我希望用户能够点击事件名称并使其弹出与事件详细信息相关的模式。

我目前有一个ng-click="eventDetails(objectId)"链接到标题名称。然后在我的控制器,这是我的代码

app.controller('viewEventRequestsController', function($scope, EventFactory){ 

// this gets a list of events, one of the properties of the event is called objectId 
     EventFactory.query(function(response){ 
      $scope.events = response.results; 
     }); 

//this is the function that runs when I click, the event name.   
      $scope.eventDetails = function(objectId){ 
      $scope.modalOn = true; 
      $scope.modal = EventFactory.get({ objectId: objectId }); 

      console.log($scope.modal) 

     } 

    }); 

这是我的标记

<tr ng-repeat="items in events | filter:filter | orderBy:sort:reverse"> 
     <td> 
      <a ng-click="eventDetails(objectId)">{{items.Name}}</a> 
     </td> 

我的console.log($ scope.modal)的一部分;正在返回完整的对象数组,而不是我单击的单个对象。

然而,在我的应用程序的不同部分,当我使用$scope.events = EventFactory.get({ objectId: $routeParams.objectId });这工作正常。我不能这样做的原因是因为我需要eventDetails在模式中弹出而不是重定向到它自己的页面。所以我这次无法使​​用$routeParams

关于如何实现这一点的任何想法?

回答

1

也许在您的文章错字但是......万一你的实际代码是这样的,你传递一个不存在的对象插入到eventDetails功能在这里:

<a ng-click="eventDetails(objectId)"> 

你所需要的是通过

<a ng-click="eventDetails(items.itemId /*or whatever the id field is */)"> 

,因为你迭代eventDetails阵列,并且每个元素的值分配给项目变量这里:

ng-repeat="items in events | filter:filter | orderBy:sort:reverse" 

就像我说过的,不知道是否有打字错误,但事实上,如果您没有通过任何过滤器,您将获得所有事件,它的行为就像调用get()而没有任何过滤器一样。

--- UPDATE ---

既然你有你的本地事件,你可以得到一个单独的事件,而不必诉诸到另一台服务器的请求。

试试这个在您的eventDetails()函数:

$scope.eventDetails = function(event){ 

     $scope.modalOn = true; 
     var index = $scope.events.indexOf(event); 
     if(index > -1){ 
     $scope.modal = $scope.events[index]; 
     } 
    } 

在HTML只是通过全项作为参数传递给函数:

<tr ng-repeat="items in events | filter:filter | orderBy:sort:reverse"> 
    <td> 
     <a ng-click="eventDetails(items)">{{items.Name}}</a> 
    </td> 
+0

没错,就是这样!不能相信我错过了这一点。我想知道的一件事是,如果我已经有了表中所需的数据,是否有一种方法可以重构此代码,以便不需要发出另一个“GET”请求? –

+1

是的,我已经更新了我的答案,让您可以在不向服务器发出其他请求的情况下检索事件 –

+0

真棒,谢谢安东尼奥,非常有帮助! –