AngularJS-绑定对象列表

Question

I am struck in doing the object mapping in AngularJS application.

In html I have around 10 rows, each row with a label and 2 date fields.

Each row is mapped to a java object as below

    public class RowObject {

    private Long id;
    private String label;
    private Date startDate;
    private Date endDate;


    // getters / setters    

}

I am trying with a html code as below

    <div class="form-group">
        <label class="control-label col-md-3">Row 1</label>
        <div class="input-group col-md-4">
            <input id="startDate1" type="text" class="form-control" ng-model="entity.rowObjects[0].startDate">
            <input id="endDate1" type="text" class="form-control" ng-model="entity.rowObjects[0].endDate">
            <input type="text" ng-model="entity.rowObjects[0].id" ng-value="1" style="display: none;">
        </div>
    </div>      

    <div class="form-group">
        <label class="control-label col-md-3">Row 2</label>
        <div class="input-group col-md-4">
            <input id="startDate2" type="text" class="form-control" ng-model="entity.rowObjects[1].startDate">
            <input id="endDate2" type="text" class="form-control" ng-model="entity.rowObjects[1].endDate">
            <input type="text" ng-model="entity.rowObjects[1].id" ng-value="1" style="display: none;">
        </div>
    </div>              

Error message

    Caused by: com.fasterxml.jackson.databind.JsonMappingException: Can not deserialize instance of java.util.ArrayList out of START_OBJECT token
 at [Source: org.apache.cxf.transport.http.AbstractHTTPDestination$1@40cc74d9; line: 1, column: 2] (through reference chain: com.jai.model.Entity["rowObjects"])    

Answer 1

I think your problem is on the Java side. I can't tell you exactly where as you didn't provided your java code, but the general problem is your trying to deserialize a json object : {} into an ArrayList (that expect a json array : [] )

Just a comment about your angular code, I advise you to use ng-repeat :

<div class="form-group" ng-repeat="value in entity.rowObjects">
    <label class="control-label col-md-3">Row {{$index}}</label>
    <div class="input-group col-md-4">
        <input id="startDate1" type="text" class="form-control" ng-model="value.startDate">
        <input id="endDate1" type="text" class="form-control" ng-model="value.endDate">
        <input type="text" ng-model="value.id" ng-value="1" style="display: none;">
    </div>
</div>