Question

我的角度转发器存在问题。这是我第一次真正尝试角度，我正在尝试为经理人员制作一个中继器。当我更改每行的员工数量以显示它过滤列表并在每行显示正确数量的员工时，转发器按预期工作。但是，对于宽度不变的所有员工，都有一个水平连接器。

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

任何人都可以帮我理解我的角度代码发生了什么吗？

Answer 1

从我的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>

角度重复不是更新样式

1 个答案: