javascript - 未获取表中的表达式值

Question

我是angularjs的新手。因此，我有一个用于表数据的 contextmenu。

<div contextmenu-container="meta.contextmenu">
          <table class="table table-striped table-bordered report-table" fixed-header>
            <thead class="text-center text-info">
            <th class="text-center">Annotation</th>
            <th class="text-center">Field</th>
            <th class="text-center">Message</th>
            <th class="text-center">Score</th>
            </thead>
            <tr ng-repeat="report in reports.data">
              <td class="text-center">{{ report.attributes.annotation }}</td>
              <td class="td-report-field" contextmenu-item="row">{{ report.attributes.field }}</td>
              <td>
                <input type="checkbox" ng-if="report.attributes.message && showcheckbox" 
                ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
                <span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
                  {{ report.attributes.message }}
                </span>
                <span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
              </td>
              <td class="text-center">{{ report.attributes.score }}</td>
              <div contextmenu="meta.contextmenu" class="dropdown contextmenu ">
              <ul class="dropdown-menu dropdown-content" role="menu">
                  <li>
                      <a role="menu" href
                      data-ng-click="deleteAnnotation(report.attributes.field)">
                      <span>delete</span>
                      </a>
                  </li>
              </ul>
            </div>
            </tr>
          </table>
          </div>

在此，当我尝试在 deleteAnnotation 方法中使用 report.attributes.field 时，它会给出 undefined 。那么，如何解决呢？

Answer 1

您可以获取“$itemScope”内的每个重复对象。
在您的情况下，它将是“$itemScope.report”，之后您可以对该数据执行您想要的任何操作。

在 Angular contextmenu 中，“meta.contextmenu.item”将指向“contextmenu-item”。希望这会有所帮助。

ui bootstrap contextmenu

HTML

<div ng-app="HelloWorldApp" class='container'>
    <div ng-controller="HelloWorldController">
      <table class='table table-striped'>
          <tr>
            <td><b>NAME</b></td>
            <td><b>ADDRESS</b></td>
          </tr>
        <tr ng-repeat="obj in objects" >
          <td>{{obj.name}}</td>
          <td context-menu="menuOptions">{{obj.address}}</td>
        </tr>
      </table>
      <div ng-bind="selected"></div>
    </div>
</div>

JS

angular.module('HelloWorldApp', ['ui.bootstrap.contextMenu'])
   .controller('HelloWorldController', function($scope) {
       $scope.greeting = "Hello World";
  $scope.objects = [{
    name: 'person1',
    address: 'India'
  },
  {
    name: 'any name',
    address: 'any address'
  }];
  $scope.menuOptions = [
    ['Select', function ($itemScope, $event, modelValue, text, $li) {
        $scope.selected = $itemScope.obj.address;
    }]
];
});

angular-contextmenu

HTML

<div ng-app="HelloWorldApp" class='container'>
    <div ng-controller="HelloWorldController">
      <div contextmenu="meta.contextmenu" class="dropdown contextmenu">
  <ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">
      {{ meta.contextmenu.item.address }}
    </li>

    <li>
      <a role="menuitem" href
        ng-click="delete(meta.contextmenu.item)"
      >
        <span>Delete</span>
      </a>
    </li>
  </ul>
</div>

      <table class='table table-striped' contextmenu-container="meta.contextmenu">
          <tr>
            <td><b>NAME</b></td>
            <td><b>ADDRESS</b></td>
          </tr>
        <tr ng-repeat="obj in objects" contextmenu-item="obj" >
          <td>{{obj.name}}</td>
          <td context-menu="menuOptions">{{obj.address}}</td>
        </tr>
      </table>
      Data  to delete : 
      <pre>{{selected.name}}</pre>
      <pre>{{selected.address}}</pre>
    </div>
</div>

JS

angular.module('HelloWorldApp', ['io.dennis.contextmenu'])
   .controller('HelloWorldController', function($scope) {
       $scope.greeting = "Hello World";
  $scope.objects = [{
    name: 'person1',
    address: 'India'
  },
  {
    name: 'any name',
    address: 'any address'
  }];
  $scope.delete = function(data){
    console.log(data);
    $scope.selected = data;
  }
});

**您将需要包含 ui-bootstrap 上下文菜单和/或 Angular 上下文菜单所需的库** 再次对格式错误表示歉意。