Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
html表格可以解决这个问题吗?_Html_Angularjs_Html Table_Angularjs Ng Repeat - Fatal编程技术网

html表格可以解决这个问题吗?

html表格可以解决这个问题吗?,html,angularjs,html-table,angularjs-ng-repeat,Html,Angularjs,Html Table,Angularjs Ng Repeat,好的,我有一个假装的数据集。它试图模仿excel中的表格数据 function SU(name: String, data: Array<any>) { this.name = name, this.data = data }; function Month(month: String, year: String, goal: Number, projection: Number, actual: Number) { this.month = month,

好的,我有一个假装的数据集。它试图模仿excel中的表格数据

function SU(name: String, data: Array<any>) {
    this.name = name,
    this.data = data
};

function Month(month: String, year: String, goal: Number, projection: Number, actual: Number) {
    this.month = month,
    this.year = year,
    this.goal = goal,
    this.projection = projection,
    this.actual = actual,
    this.remaining = function () { return this.goal - this.actual }
};

$scope.Recruitment.ServiceUnits = [
    new SU("SU101",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ]),
    new SU("SU102",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ]),
    new SU("SU103",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ])
];

函数SU(名称:字符串,数据:数组){
this.name=name,
this.data=数据
};
功能月(月:字符串,年:字符串,目标:数字,投影:数字,实际:数字){
这个月,
今年,
这个目标,
这个。投影=投影,
this.actual=actual,
this.remaining=function(){返回this.goal-this.actual}
};
$scope.recruption.ServiceUnits=[
新SU(“SU101”,
[
新月份(“2014年4月”、“2014年1月、2月、0月),
新月份(“2014年5月”、“2014年2月、2月、0月),
新月份(“2014年6月”、“2014年3月、2月、0月),
新月份(“2014年7月”、“2014年4月、2月、0月),
新月份(“2014年8月”、“2014年5月、2月、0月),
新月份(“2014年9月”、“6日、2日、0日”),
新月份(“2014年10月”、“7日、2日、0日”),
新月份(“2014年11月”、“2014年8月、2月、0月),
新月份(“2014年12月”、“2014年9月、2月、0月),
新月份(“2015年1月”、“2015年10月、2月、0月),
新月份(“2015年2月”、“2015年11月、2月、0月),
新月份(“2015年3月”、“2015年12月、2月、0月),
新月份(“2015年4月”、“2015年”13、2、0),
新月份(“2015年5月”、“2015年”14、2、0),
新月份(“2015年6月”、“2015年”15、2、0),
新月份(“2015年7月”、“2016年2月、0日”),
新月份(“2015年8月”、“2015年”17、2、0),
新月份(“2015年9月”、“2015年”18、2、0)
]),
新SU(“SU102”,
[
新月份(“2014年4月”、“2014年1月、2月、0月),
新月份(“2014年5月”、“2014年2月、2月、0月),
新月份(“2014年6月”、“2014年3月、2月、0月),
新月份(“2014年7月”、“2014年4月、2月、0月),
新月份(“2014年8月”、“2014年5月、2月、0月),
新月份(“2014年9月”、“6日、2日、0日”),
新月份(“2014年10月”、“7日、2日、0日”),
新月份(“2014年11月”、“2014年8月、2月、0月),
新月份(“2014年12月”、“2014年9月、2月、0月),
新月份(“2015年1月”、“2015年10月、2月、0月),
新月份(“2015年2月”、“2015年11月、2月、0月),
新月份(“2015年3月”、“2015年12月、2月、0月),
新月份(“2015年4月”、“2015年”13、2、0),
新月份(“2015年5月”、“2015年”14、2、0),
新月份(“2015年6月”、“2015年”15、2、0),
新月份(“2015年7月”、“2016年2月、0日”),
新月份(“2015年8月”、“2015年”17、2、0),
新月份(“2015年9月”、“2015年”18、2、0)
]),
新SU(“SU103”,
[
新月份(“2014年4月”、“2014年1月、2月、0月),
新月份(“2014年5月”、“2014年2月、2月、0月),
新月份(“2014年6月”、“2014年3月、2月、0月),
新月份(“2014年7月”、“2014年4月、2月、0月),
新月份(“2014年8月”、“2014年5月、2月、0月),
新月份(“2014年9月”、“6日、2日、0日”),
新月份(“2014年10月”、“7日、2日、0日”),
新月份(“2014年11月”、“2014年8月、2月、0月),
新月份(“2014年12月”、“2014年9月、2月、0月),
新月份(“2015年1月”、“2015年10月、2月、0月),
新月份(“2015年2月”、“2015年11月、2月、0月),
新月份(“2015年3月”、“2015年12月、2月、0月),
新月份(“2015年4月”、“2015年”13、2、0),
新月份(“2015年5月”、“2015年”14、2、0),
新月份(“2015年6月”、“2015年”15、2、0),
新月份(“2015年7月”、“2016年2月、0日”),
新月份(“2015年8月”、“2015年”17、2、0),
新月份(“2015年9月”、“2015年”18、2、0)
])
];
我将如何使用ng repeat来显示此内容?有两层标题,在两个月之间交替使用目标、预测、实际和剩余数据

    <div id="goalData">
    <table>
        <thead>
            <tr>
                <th colspan="4" ng-repeat="data in Recruitment.ServiceUnits[0].data track by $index">{{data.month | limitTo:3}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">

            </tr>
        </tbody>
        <tfoot>
            <tr></tr>
        </tfoot>
    </table>
</div>

{{data.month | limito:3}
我第一个头球打得很好。第二行标题我不确定,因为我似乎需要一个嵌套的ng repeat

至于主体,我可以很好地处理每一行,但实际上,将表数据放在正确的位置是有问题的


即使这是表格数据,表格对此是否不正确?有没有办法重新构造它,使其正常工作,或者我需要开始使用div或创建自己的角度指令?

好吧,根据CozyAzure发布的链接,我找到了一种解决方案

我保持数据集不变,但改变了处理html的方式,如下所示

        <table>
        <tr>
            <td>
                &nbsp;
                <table>
                    <tr>
                        <th>SU</th>
                    </tr>
                    <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">
                        <td>{{su.name}}</td>
                    </tr>
                </table>
            </td>
            <td ng-repeat="month in Recruitment.ServiceUnits[0].data track by $index">
                {{month.month | limitTo: 3}}
                <table>
                    <tr>
                        <th>Goal</th>
                        <th>Proj</th>
                        <th>Actl</th>
                        <th>Rmng</th>
                    </tr>
                    <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">
                        <td>{{month.goal}}</td>
                        <td>{{month.projection}}</td>
                        <td>{{month.actual}}</td>
                        <td>{{month.remaining()}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

苏
{{su.name}
{{month.month}limito:3}
目标
项目
Actl
Rmng
{{month.goal}}
{{month.projection}}
{{month.actual}
{{month.remaining()}}
这就产生了这种结果

这当然需要设计样式

不幸的是,我现在需要实现固定的标题,这样文档就可以在标题固定的情况下向下滚动。我想我已经达到了表的极限,因为我读到的所有东西都说这是一个要实现的噩梦,特别是在我当前的结构中


div可能是执行所有操作的更容易的解决方案。尤其是当我需要在越来越多的效果中开始分层时。

也许你应该看看这个。首先,您需要对数据进行排序,将列表数据转换为视图格式,这将使ng repeat更易于使用。@amrit_neo您能举一个简短的示例说明您的意思吗?