在ng-click上填充Angular模态

Populate Angular Modal on ng-click

本文关键字：Angular 模态 填充 ng-click      更新时间：2023-09-26

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

我有一个来自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。

关于如何实现这个，有什么想法吗?

可能是你的文章打错了，但是…以防你的实际代码是这样的，你在这里传递一个不存在的对象到你的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()没有任何过滤器。

——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>
相关文章：