динамически добавлять значение colspan по условию angularjs

Question

как изменить заголовок таблицы «th» colspan на состояние с использованием углового?

Heres то, что я пробовал. это не работает, что тут не так!

<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