2017-02-02 17 views
0

私の角度リピータに問題があります。これは初めての試みであり、マネージャーが持っている従業員用のリピーターを構築しようとしています。リピータは、リストをフィルタリングし、各行に適切な数の従業員を表示することを示すために、行ごとに何人の従業員を変更する場合、意図どおりに機能します。しかし、幅が変わらない全従業員のための水平コネクタとして機能するものがあります。角度リピートがスタイルを更新していません

<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> 

角度コードで何が起こっているのか理解してくれる人はいますか?チェック - : "{myExpression '幅'}" `

+0

{{}}私のngstyleから除去しましたこの単純なplunker https://plnkr.co/edit/Ka8iooNkYH84YmkGoONm?p=preview – Fissio

+0

ありがとう@ Fissio働いた。 –

答えて

0

は、少なくとも、ngstyleから` 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> 
関連する問題