角度重複未更新風格

我遇到了角度中繼器的問題。這是我第一次真正嘗試角度，我正在努力爲管理人員建立一個員工中繼器。當我改變每行有多少員工來顯示它過濾列表並在每行顯示合適的員工人數時，中繼器按預期工作。但是，對於寬度不變的所有員工來說，這是一個水平連接器。角度重複未更新風格

<div ng-repeat-start="n in chart.renderRange(chart.data.employees.length,chart.employeeRenderBoxes)" 
    class="horizontalConnector" 
    ng-style="{'width': {{ chart.calcEmployeesHorizontalRowWidth((chart.data.employees| paging:n-1:chart.employeeRenderBoxes).length) }} + 'px' }"></div> 
<table ng-repeat-end class="employeeNav" cellspacing="0" cellpadding="0"></table>

我的控制器看起來是這樣的：

(function() { 
    'use strict'; 

angular 
    .module('app') 
    .controller('chartController', chartController); 

chartController.$inject = ['$log', 'bootstrappedData']; 

function chartController($log, bootstrappedData) { 
    /* jshint validthis: true */ 
    var vm = this; 
    vm.employeeRenderBoxes = 4; 
    vm.employeeRenderRange = 0; 
    vm.data = bootstrappedData.chartData; 

    vm.renderRange = renderRange; 
    vm.calcEmployeesHorizontalRowWidth = calcEmployeesHorizontalRowWidth; 

    function renderRange(employeeCount, employeeRenderBoxes) { 
     var _range = []; 
     var numberOfSplits = Math.ceil(employeeCount/((!!employeeRenderBoxes) ? employeeRenderBoxes : 1)); 
     for (var i = 1; i <= numberOfSplits; i += 1) { 
      _range.push(i); 
     } 
     vm.employeeRenderRange = _range.length; 
     return _range; 
    } 

    function calcEmployeesHorizontalRowWidth(rangeCounter) { 
     return (rangeCounter - 1) * 130; 
    } 
} 
})();

我感到奇怪的是，所呈現的HTML顯示寬度的變化，但風格不變。

<div ng-repeat-start="n in chart.renderRange(chart.data.employees.length,chart.employeeRenderBoxes)" class="horizontalConnector ng-scope" ng-style="{'width': 390 + 'px' }" style="width: 650px;"></div>

任何人都可以幫助我理解我的角碼是怎麼回事？

來源

2017-02-02 Robert Garland

至少從ngstyle，取出大括號'ngstyle = 「{ '寬度'：myExpression}」' - 校驗這個簡單的plunker https://plnkr.co/edit/Ka8iooNkYH84YmkGoONm?p=preview – Fissio

謝謝@Fissio工作。 –

除去{{}}從我ngstyle

<div ng-repeat-start="n in chart.renderRange(chart.data.employees.length,chart.employeeRenderBoxes)" 
class="horizontalConnector" 
ng-style="{'width': chart.calcEmployeesHorizontalRowWidth((chart.data.employees| paging:n-1:chart.employeeRenderBoxes).length) + 'px' }"></div>

來源

2017-02-02 16:38:36

角度重複未更新風格

回答

相關問題