在ng-click上填充Angular Modal

时间:2014-03-25 17:28:07

标签: javascript angularjs

这是一项看似简单的任务,我有点挣扎。

我有一个来自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 个答案:

答案 0 :(得分:1)

可能是你帖子中的拼写错误但是......为了防止你的实际代码是这样,你在这里将一个不存在的对象传递给你的eventDetails函数:

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

你需要传递的是

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

因为您正在迭代eventDetails数组并将每个元素的值分配给 items 变量:

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

就像我说的那样,不确定是否输入错误,但事实上你获得的所有事件就像你没有通过任何过滤器一样,它的行为就像调用get()没有任何过滤器。

---更新---

由于您在本地拥有自己的活动,因此无需借助其他服务器请求即可获得单个活动。

在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>