Binding issue with List of objects using AngularJS

Question

I have a simple create page which has list of label and date objects, rendered through data from rest api /restapi/reportTypes. On clicking the Save button I want to save all the data, by calling rest api /restapi/entity. But all the reportTypes objects are passed through the main object called entity.

Web page looks like this

Javascript

crudApp.controller('addController', function($scope, $http, $location) {

    $http.get("/restapi/reportTypes").success(function(data, status, headers, config) {
        $scope.reportTypes = data;
    });

    $scope.add = function() {
        $http.post("/restapi/entity", $scope.entity).success(function(data, status, headers, config, statusText) {
            $location.path('/list');    
        }).error(function(data, status, headers, config, statusText) {
            console.log("Error : " +statusText);
        });
    }
}

HTML

<div class="form-group" ng-repeat="reportType in reportTypes">
    <label class="control-label col-md-3">{{reportType.label}}</label>

    <div class="input-group col-md-4">
        <input id="startDate" type="text" class="form-control" ng-model="reportType.startDate"> 
    </div>
</div>


<div class="form-group">
    <label class="control-label col-md-2">NOTES</label>
    <div class="col-md-7">
        <input type="text" ng-model="entity.notes" class="form-control">
    </div>
</div>

<input type="submit" value="Add" ng-click="add()">

For that when I try with below code,

<div class="form-group" ng-repeat="reportType in entity.reportTypes">

I get error

Error: $scope.entity is undefined

Updated:

Here is my Entity class,

public class Entity {

    private List<ReportType> reportTypes;

    private String notes;

    // getter / setters
}

what is $scope.entity supposed to represent? it's not defined here in this code before it is used. — Claies
– Claies, Commented Oct 30, 2015 at 16:51
ok that's the server class Entity, that's not the same as the $scope property entity; where are you defining $scope.entity? — Claies
– Claies, Commented Oct 30, 2015 at 16:55
it's not really clear what you are trying to do here. You have an API that is retrieving an array of reportTypes, a form that is iterating through each of those and outputting a label and what appears to be a date, followed by an unrelated single string of notes, and a post method that seems to be posting to an API that wants both of those as a single object. — Claies
– Claies, Commented Oct 30, 2015 at 17:00
I think what you are trying to do is retrieve all possible report types, select some report types for a new entity, along with notes, and pass this new object back to the database. If that is the case, then your HTML isn't right; if that isn't the goal, your code isn't really clear enough to make sense of what your intent is here. — Claies
– Claies, Commented Oct 30, 2015 at 17:06

Michael Oryl · Accepted Answer · 2015-10-30 17:07:18Z

Without having a working Plnkr.co example to look at, I'm going to suggest that the problem is that you don't define $scope.entity in your controller to start with. Maybe go with something like this?

crudApp.controller('addController', function($scope, $http, $location) {
    $scope.entity = { reportTypes: [] };

If you don't define it ahead of time, you'd need some other logic to protect from referencing something that doesn't exist yet.

Perhaps you could have an ng-if conditional (not ng-show, which leaves it in the DOM) around the code with the ng-repeat in it to ensure that it's valid. You need $scope.entity to exist and for it to have a reportTypes property.

<div ng-if="entity != undefined && entity.reportType != undefined"
    class="form-group" ng-repeat="reportType in entity.reportTypes">

Collectives™ on Stack Overflow

Binding issue with List of objects using AngularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related