Angular js将只显示ng repeat中的第一个元素

Angular js will only show first element in ng-repeat

本文关键字:第一个 元素 repeat ng js 显示 Angular      更新时间:2023-09-26

我使用的是角度1.5.5

function GetDashboardForAllEmployees()
{
    var response = eRotaService.GetDashboard();
    response.then(function (data) {
        $scope.weekDays = data.data;
        console.log(data.data);
    }, function () {
        alert("Failed to load dashboard.");
    })
}

.NET服务返回json:

 {
    "weekDays": [{
        "name": "Monday",
        "display": 0,
        "employees": [{
            "employeeId": 1,
            "name": "Adam",
            "start": 8,
            "finish": 16,
            "gridSetup": {
            "sizeX": 8,
            "sizeY": 1,
            "row": 0,
            "col": 8
        }
    }, {
        "employeeId": 2,
        "name": "Paul",
        "start": 16,
        "finish": 22,
        "gridSetup": {
            "sizeX": 6,
            "sizeY": 1,
            "row": 0,
            "col": 16
        }
    }]
}, {
    "name": "Tuesday",
    "display": 1,
    "employees": [{
        "employeeId": 1,
        "name": "Bob",
        "start": 10,
        "finish": 18,
        "gridSetup": {
            "sizeX": 8,
            "sizeY": 1,
            "row": 0,
            "col": 10
        }
    }, {
        "employeeId": 2,
        "name": "Paul",
        "start": 16,
        "finish": 22,
        "gridSetup": {
            "sizeX": 6,
            "sizeY": 1,
            "row": 0,
            "col": 16
        }
    }]
}]

}

我计划展示一周中的每一天,但只有第一天(星期一)会展示。

 <div class="row" ng-repeat="week in weekDays">
    @for (int i = -2; i < 22; i+=2 )
    {
        <div class="col-sm-1">
            @string.Format("{0}:00", i + 2)
        </div>
    }
    <hr />
    <div class="col-sm-12">
        <h3>{{week[$index].name}}</h3>
        <hr />
        <div class="row" ng-repeat="employee in week[$index].employees">
            <div class="col-sm-12">
                <h4>{{employee.name}}</h4>
                <hr />
                <div gridster>
                    <ul>
                        <li gridster-item="employee.gridSetup"  ng-cloak>
                            <div class="panel-default" >
                                <div class="panel-heading">
                                    <h5>From : {{employee.start}} to {{employee.finish}}</h5> 
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我试着在没有$index的情况下使用ng repeat,但结果是一页空白(并没有角度js错误)。

<div class="row" ng-repeat="week in weekDays">

难道不是吗

<div class="row" ng-repeat="week in weekDays.weekDays">

Jason字符串的格式如下:

{
"weekDays": [
    {
        "name": "Monday",
        "display": 0,
        "employees": [
            {
                "employeeId": 1,
                "name": "Adam",
                "start": 8,
                "finish": 16,
                "gridSetup": {
                    "sizeX": 8,
                    "sizeY": 1,
                    "row": 0,
                    "col": 8
                }
            },
            {
                "employeeId": 2,
                "name": "Paul",
                "start": 16,
                "finish": 22,
                "gridSetup": {
                    "sizeX": 6,
                    "sizeY": 1,
                    "row": 0,
                    "col": 16
                }
            }
        ]
    },
    {
        "name": "Tuesday",
        "display": 1,
        "employees": [
            {
                "employeeId": 1,
                "name": "Bob",
                "start": 10,
                "finish": 18,
                "gridSetup": {
                    "sizeX": 8,
                    "sizeY": 1,
                    "row": 0,
                    "col": 10
                }
            },
            {
                "employeeId": 2,
                "name": "Paul",
                "start": 16,
                "finish": 22,
                "gridSetup": {
                    "sizeX": 6,
                    "sizeY": 1,
                    "row": 0,
                    "col": 16
                }
            }
        ]
    }
]
}

这意味着所有的工作日都在元素"weekdays"中。然后你在一周内只有一周的时间,不需要数组索引器来访问洞的东西。