使用自定义指令使用ng-repeat显示2个不同的表

neelmeg 发表于 Dev

neelmeg

我有一个自定义指令（生成表），该指令在索引页面上重复两次。表的值通过$ scope.globalrows变量填充。即使globalrows包含2个数组值，它始终会打印第二个值。如何修改模板或指令以显示该表唯一的值并防止内容覆盖。

问题：这些表在globalarray中的第二个表内容中重复了两次。我看到第二个表正在覆盖第一个表。

index.html

<grid-print section="1"></grid-print>
<grid-print section="2"></grid-print>

模板：print.dir.html

<form class="form-horizontal clearfix">
    <table class="grid table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="col in cols">{{col.title}}</th>
        </tr>
      </thead>
      <tbody>
          <tr ng-repeat="row in globalrows track by $index" index={{index}}>
            <td ng-repeat="col in cols">          
              <span>{{ row[col.field] }}</span>
            </td>  
          </tr>
      </tbody>
    </table>
    </form>

指示：

.directive("gridPrint", function($sessionStorage, dataservice) {
    return {
        restrict: 'E',
        templateUrl: "components/print/templates/print.dir.html",
        replace: true,
        controller: function($scope, $state, $attrs) {
            //array of the items that are to be displayed on the 2 tables  
            $scope.globalrows = dataservice.getCollectionData();          

        },
        link: function(scope, element, attributes){
           // console.log("in grid print"+attributes['section']);            
        }
    };
})

另一个生成行的指令cols：

.directive("grid", function() {
    return {
        restrict: 'E',
        templateUrl: "components/section/directives/section.shared.dir.html",
        replace: true,
        controller: function($scope) {
            $scope.$on('ready-to-render', function(e, rows, cols) {
               // console.log(rows, cols);
                $scope.globalrows.rows = rows;
                $scope.cols = cols;
            });
        }
    };
})

globalrows数组

Pankaj Parkar

当前，您的指令未创建任何子范围，基本上它在页面之间共享相同的范围。并且，当您更新任何一个表的数据时，它将同时更新两个地方的数据。

通过具有隔离作用域（如）来创建指令scope: { ... }，以便每个指令都可以作为单独的组件工作，并将数据从隔离作用域属性传递给指令。这里data1＆data2是将由该指令的消费者提供动态表数据值。在您的情况下，您可以做的是，应该从指令中取出服务调用controller，因为这会使您的指令更紧密地耦合在一起Component。而是将其移出并放置在指令元素所在的父控制器中。

标记

<grid-print section="1" columns="cols" table-data="data1"></grid-print>
<grid-print section="2" columns="cols" table-data="data2"></grid-print>

控制器

 // If its simple hardcoded data arriving from method then use below
 // $scope.globalrows = dataservice.getCollectionData();
 // $scope.data1 = $scope.globalrows[0];
 // $scope.data2 = $scope.globalrows[1];
 // If data is comming from promise, the do following thing.
 dataservice.getCollectionData().then(function(data){
       $scope.globalrows = data;
       $scope.data1 = $scope.globalrows[0];
       $scope.data2 = $scope.globalrows[1];
});

$scope.cols = $scope.columns; //this would be array of columns.

指示

.directive("gridPrint", function($sessionStorage, dataservice) {
    return {
        restrict: 'E',
        templateUrl: "components/print/templates/print.dir.html",
        replace: true,
        scope: {
           tableData: '=', //table data will set by directive consumer
           columns: '=' // no need for named attributes
        },
        link: function(scope, element, attributes){
            // do DOM manipulation here if required.            
        }
        controller: function($scope) {
            // It's possible the data is not filled yet, because you gain the data from a service (which is asynchronous), 
            //so just initialize with empty array
            if(angular.isUndefined($scope.tableData)){
              $scope.tableData = [];
            }
            if(angular.isUndefined($scope.columns)){
              $scope.columns = [];
            }
        }
    };
})

模板：print.dir.html

<form class="form-horizontal clearfix">
<table class="grid table table-bordered">
  <thead>
    <tr>
      <th ng-repeat="col in columns">{{col.title}}</th>
    </tr>
  </thead>
  <tbody>
      <tr ng-repeat="row in tableData track by $index" index={{index}}>
        <td ng-repeat="col in columns">          
          <span>{{ row[col.field] }}</span>
        </td>  
      </tr>
  </tbody>
</table>
</form>

普伦克在这里

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-25

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章