使用AngularJS绑定对象列表的问题

时间:2015-10-30 16:47:18

标签: javascript angularjs

我有一个简单的创建页面,其中包含标签和日期对象的列表,通过rest api / restapi / reportTypes中的数据呈现。 单击“保存”按钮后,我想通过调用rest api / restapi / entity来保存所有数据。 但是所有的reportTypes对象都通过名为entity的主对象传递。

网页看起来像这样

enter image description here

的Javascript

0

HTML

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);
        });
    }
}

当我尝试下面的代码时,

<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()">

我收到错误

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

更新

这是我的实体类,

Error: $scope.entity is undefined

1 个答案:

答案 0 :(得分:1)

如果没有一个有效的Plnkr.co示例,我会建议问题是你没有在控制器中定义$ scope.entity来开始。也许是这样的?

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

如果你没有提前定义它,你需要一些其他逻辑来防止引用尚不存在的东西。

也许你可以在代码周围使用ng-if条件(不是ng-show,将它留在DOM中),并使用ng-repeat来确保它是有效的。您需要$ scope.entity才能存在并且它具有reportTypes属性。

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