简体   繁体   中英

Angular js will only show first element in ng-repeat

I am using angular 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 service returns 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
        }
    }]
}]

}

I am planning to display each day of the week, but only first day will show(Monday).

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

I tried to use ng-repeat without $index but result was blank page (no angular js error).

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

hm mustn't it be

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

The Jason-String looks somewat formated like this:

{
"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
                }
            }
        ]
    }
]
}

so this means that all weekdays are in the element "weekDays". And then you have in week only one week and don't need an array-indexer to access the hole thing.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM