来自 ngRepeat 的变量在 ngClick 中不起作用

Posted

技术标签:

【中文标题】来自 ngRepeat 的变量在 ngClick 中不起作用【英文标题】:variable from ngRepeat doesn't work inside ngClick 【发布时间】:2016-09-27 07:06:01 【问题描述】:

我不知道我做错了什么。应用程序正在通过 REST 从服务器获取对象,然后将其列在表中。一切看起来都不错,但是 ngClick 参数中的变量无法编译,因此会产生一些麻烦。

<tbody>
  <tr ng-repeat="workspace in workspaces" id="workspace_[workspace.id]">
    <td>[ workspace.name ]</td>
    <td>
      <a href="javascript:void(0)" class="btn btn-info" ng-click="renameWorkspace(workspace.id)"><i class="fa fa-edit"></i></a>
      <a href="javascript:void(0)" class="btn btn-danger" ng-click="deleteWorkspace(workspace.id)"><i class="fa fa-trash-o"></i></a>
    </td>
  </tr>
</tbody>

输出:

<tbody>
  <tr ng-repeat="workspace in workspaces" id="workspace_1" class="ng-scope">
    <td class="ng-binding">Work12</td>
    <td>
      <a href="javascript:void(0)" class="btn btn-info" ng-click="renameWorkspace(workspace.id)"><i class="fa fa-edit"></i></a>
      <a href="javascript:void(0)" class="btn btn-danger" ng-click="deleteWorkspace(workspace.id)"><i class="fa fa-trash-o"></i></a>
    </td>
  </tr>
  <tr ng-repeat="workspace in workspaces" id="workspace_2" class="ng-scope">
    <td class="ng-binding">Private43243</td>
    <td>
      <a href="javascript:void(0)" class="btn btn-info" ng-click="renameWorkspace(workspace.id)"><i class="fa fa-edit"></i></a>
      <a href="javascript:void(0)" class="btn btn-danger" ng-click="deleteWorkspace(workspace.id)"><i class="fa fa-trash-o"></i></a>
    </td>
  </tr>
  <tr ng-repeat="workspace in workspaces" id="workspace_3" class="ng-scope">
    <td class="ng-binding">iuytre</td>
    <td>
      <a href="javascript:void(0)" class="btn btn-info" ng-click="renameWorkspace(workspace.id)"><i class="fa fa-edit"></i></a>
      <a href="javascript:void(0)" class="btn btn-danger" ng-click="deleteWorkspace(workspace.id)"><i class="fa fa-trash-o"></i></a>
    </td>
  </tr>
</tbody>

角度(1.5.5):

var cerber = angular.module('cerber', ['ngRoute', 'ngResource', 'ngCookies']);

cerber.config(function($routeProvider, $locationProvider, $interpolateProvider) 
  $interpolateProvider.startSymbol('[').endSymbol(']');

  $routeProvider
  .when('/', 
    templateUrl : templatesUrlPrefix + 'group',
    controller  : 'mainController'
  )
  [...]
  .otherwise(redirectTo : '/');

  $locationProvider.html5Mode(false);
);

cerber.controller('mainController', function($scope, $cookies, $location, $http, $route, $compile, GroupService, InstanceService, WorkspaceService) 
$scope.manageWorkspaces = function()
  $http(
    url: responsesUrlPrefix + 'get-workspaces',
    method: "GET",
    params: 
  )
  .then(function(response)
    $scope.workspaces = response.data;
    angular.element('.workspaces-manage-modal').modal('show');
  );

回复:

["id":1,"name":"Work12","icon":"fa-briefcase","user_id":1,"created_at":"2016-05-16 21:01:22","updated_at":"2016-05-28 23:02:55","id":2,"name":"Private43243","icon":"fa-user","user_id":1,"created_at":"2016-05-16 21:01:22","updated_at":"2016-05-28 23:02:08","id":3,"name":"iuytre","icon":"fa-user","user_id":1,"created_at":"2016-05-28 23:51:23","updated_at":"2016-05-28 23:51:23","id":4,"name":"iuytre","icon":"fa-user","user_id":1,"created_at":"2016-05-28 23:51:33","updated_at":"2016-05-28 23:51:33"]

【问题讨论】:

“ngClick 参数中的变量无法编译,因此会造成一些麻烦” - 有什么麻烦?它不应该编译和输出将是ng-click="deleteWorkspace(workspace.id)",它应该是这样的。 您的功能:renameWorkspace、deleteWorkspace 在您的服务 WorkspaceService 中? @NotBad4U in MainController $scope.deleteWorkspace = function(workspaceId) @dfsq 所以你说这些函数应该可以工作,即使在 DOM 结构中我可以看到变量的名称不是值? 您似乎对 Angular 的工作原理以及它对这些属性的作用感到困惑。 ng-click 接受在运行时由框架解析和评估的动态表达式。 【参考方案1】:

Angular JS 不会向您显示您在 DOM 中传递的参数,但会在控制器中为您提供正确的输出。

您可以在主控制器中轻松编写函数,接受参数为:

$scope.renameWorkspace = function(workSpaceId)
    console.log(workSpaceId);
;

$scope.deleteWorkspace = function(workSpaceId)
    console.log(workSpaceId);

【讨论】:

他已经在他的 MainCtrl 中编写了这些函数。 "@NotBad4U in MainController $scope.deleteWorkspace = function(workspaceId"

以上是关于来自 ngRepeat 的变量在 ngClick 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 中获取过滤后的 ngRepeat 数组的长度?

在 ngclick 上更改鼠标指针

如何以编程方式触发 ngClick

ngRepeat追加数据(加载更多)

无法在嵌套的 ngRepeat 上触发动画

如何在 ngRepeat-ed 元素上使用 ngAnimate?