Javascript 未获取表中的表达式值

Javascript 未获取表中的表达式值,javascript,angularjs,arrays,Javascript,Angularjs,Arrays,我是新来的angularjs。因此,我有一个用于表数据的contextmenu <div contextmenu-container="meta.contextmenu"> <table class="table table-striped table-bordered report-table" fixed-header> <thead class="text-center text-info">

我是新来的
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>

注释
领域
消息
分数
{{report.attributes.annotation}
{{report.attributes.field}
{{report.attributes.message}
{{report.attributes.message}
{{report.attributes.score}

在这种情况下,当我尝试使用deleteAnnotation方法中的
report.attributes.field时,它会给出
undefined
。那么,我该如何解决它呢?

您在
结束后调用
deleteAnnotation
,它具有ng repeat

变量
report
位于
ng repeat
范围内,因此需要调用
ng repeat
中的
deleteAnnotation
函数

<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>
            </tr>

试试这个。另外,检查报告在该循环中有一个
attributes.field
属性。

您在结束
后调用的
deleteAnnotation
具有ng repeat

变量
report
位于
ng repeat
范围内,因此需要调用
ng repeat
中的
deleteAnnotation
函数

<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>
            </tr>

试试这个。另外,检查报告在该循环中有一个
attributes.field
属性。

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

在angular contextmenu中,“meta.contextmenu.item”将指向“contextmenu item”。希望这有帮助

HTML

HTML

**您需要为ui引导上下文菜单和/或角度上下文菜单包含必要的LIB
**同样,很抱歉格式错误。

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

在angular contextmenu中,“meta.contextmenu.item”将指向“contextmenu item”。希望这有帮助

HTML

HTML

**您需要为ui引导上下文菜单和/或角度上下文菜单包含必要的LIB

**再次为错误的格式表示抱歉。

现在我在tr中调用它,但仍然无法获取值。未捕获的TypeError:无法读取HTMLTableCellElement中未定义的属性“open”。(contextmenu.js:194)在HTMLTableCellElement.dispatch(jquery.js:4435)在HTMLTableCellElement.r.handle(jquery.js:4121)@ganeshk什么是
contextmenu=“meta.contextmenu”
,尝试删除它并重新运行。在这里,我为第二列数据添加了一个角度上下文菜单。尝试打印
{report}
并检查它是否有数据现在我在tr中调用它,但仍然无法获取值。未捕获类型错误:无法读取HTMLTableCellElement上未定义的属性“open”。(contextmenu.js:194)在HTMLTableCellElement.dispatch(jquery.js:4435)在HTMLTableCellElement.r.handle(jquery.js:4121)@ganeshk什么是
contextmenu=“meta.contextmenu”
,尝试删除它并重新运行。在这里,我为第二列数据添加了一个角度上下文菜单。尝试打印
{report}
并检查它是否有数据这一个是好的,但我没有使用你使用的指令。我正在使用angular contextmenuplease refer Link2请不要将指向JSBin的链接放在代码块中,以避免自动筛选,将代码包含在帖子中,以防将来链接中断。只有外部资源链接的帖子可能会被删除,所以请在删除之前先删除。虽然此链接可能会回答问题,但最好在此处包含答案的重要部分,并提供链接供参考。如果链接页面发生更改,仅链接的答案可能无效。-阿瓦霍特,这是一个非常好的答案。请花点时间给你的答案很好的格式,以提高价值,甚至更多-你也会得到更多的投票!只要看一下我的编辑,看看可以实现多好的格式。这个很好,但我没有使用你使用的指令。我正在使用angular contextmenuplease refer Link2请不要将指向JSBin的链接放在代码块中,以避免自动筛选,将代码包含在帖子中,以防将来链接中断。只有外部资源链接的帖子可能会被删除,所以请在删除之前先删除。虽然此链接可能会回答问题,但最好在此处包含答案的重要部分,并提供链接供参考。如果链接页面发生更改,仅链接的答案可能无效。-阿瓦霍特,这是一个非常好的答案。请花点时间给你的答案很好的格式,以提高价值,甚至更多-你也会得到更多的投票!只要看一下我的编辑,就可以知道如何实现良好的格式。
<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>
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;
    }]
];
});
<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>
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;
  }
});