Question

如何更改表格标题＆＃39;使用angular？

的条件下的colspan值

继承了我的尝试。这不起作用，这里错了！。

<th  ng-attr-colspan={{2}} ng-repeat="header in ::tableHeaders track by $index">'+ '{{header}}</th>

或

<th  ng-attr-colspan="someFunct()" ng-repeat="header in ::tableHeaders track by $index">'+ '{{header}}</th>

或这有效，但我想每次都改变这个值。

<th  colspan={{2}} ng-repeat="header in ::tableHeaders track by $index">'+ '{{header}}</th>

Answer 1

您只是缺少该属性的引号。请记住，AngularJS中的花括号只提供文本而不是表达式（和花括号）。没有更多的魔力。

这会产生预期的效果，我认为这是最直接的方式：

<th colspan="{{header.cols}}" ng-repeat="header in tableHeaders track by $index">
      {{header.text}}
</th>

但是，可以选择为colspan数字调用函数：

  $scope.tableHeaders = [{
    text: 'Header 1',
    cols: 1
  },{
    text: 'Header 2',
    cols: 2
  },{
    text: 'Header 3',
    cols: 1
  }];
  $scope.getColsSpan = function(header){
     //for the sake of example this splits last digit from the text and returns it
    return parseInt(header.text.split(' ').pop());
  };

在html中：<th colspan="{{getColsSpan(header)}}" ...

如建议的那样，ng-attr-colspan也可以使用，但它也需要花括号来进行表达式评估

     <Th ng-attr-colspan="{{header.cols}}"

实施的所有选项 Plunker

在条件angularjs上动态添加colspan值

1 个答案: