Question

我需要在HTML页面上显示一个表格。该表将包含多行。在单击行的“+”图标（让我们称之为R1）时，我调用属性指令来获取数据并将其显示在新行（R2）中，该行应添加到单击行（R1）下方。

但是目前，数据没有显示，我在单击的行（R1）下面添加了一个空白行（R2）。

指令的代码是：

angular.module(
  "app", []
).controller(
  'Ctrl', [
    "$scope",
    function(
      $scope
    ) {
      $scope.items = {
        "first": {
          "name": "item1"
        },
        "second": {
          "name": "item2"
        },
        "third": {
          "name": "item3"
        }
      };
      $scope.showData = false;

    }
  ]
).directive(
  "expandItem", [
    function() {
      return {
        link: function($scope) {
          $scope.showRdoData = false;

          $scope.subitems = {
            "fir": {
              "names": "subitem1"
            },
            "sec": {
              "names": "subitem2"
            },
            "thd": {
              "names": "subitem3"
            }
          };
        },
        restrict: 'A',
        replace: false,
        template: '<tr ng-repeat="row in ::subitems">' +
          '<td style="background-color: red"><i class="fa fa-fw fa-{{showRdoData ? \'minus\' : \'plus\'}}"></i></td>' +
          '<td style="background-color: blueviolet">{{::row.names}}</td></tr>'
      }
    }
  ]
);

有人可以帮助我获取表格中显示的数据吗？代码出现在JSFiddle。如果问题不明确，请告诉我。如果需要，我会尝试改写它。

Answer 1

所以你遇到问题的原因是因为ngIf指令与ngRepeat不能很好地通过showData通过隔离范围传递给指令，你可以移动{{1}转到ngIf并实现预期的行为。 Here is a link to a working fiddle

HTML

<td>

修改后的指令值

<body ng-app="app">
  <table ng-controller="Ctrl">
    <thead>
      <th>Col1</th>
      <th>Col2</th>
    </thead>
    <tbody>
      <tr ng-repeat-start="item in items" ng-click="showData = !showData">
        <td><i class="fa fa-fw fa-{{showData ? 'minus' : 'plus'}}"></i></td>
        <td>{{item.name}}</td>
      </tr>
      <tr ng-repeat-end expand-item show-data="showData"></tr>
    </tbody>
  </table>
</body>

使用AngularJs中的attribute指令动态地向表添加行

1 个答案: