AngularJS 数据模型架构

Question

我的 Angular 应用程序上有以下内容：

$scope.things = [{
   title: 'Simple',
   type: 1,
   form: {
         input: [1, 2, 3],                        
         clone: true
      }
}];

$scope.clone = function(item) {
   item.form.input.push(Math.floor(Math.random() * 999));
};

在 HTML 部分：

<div ng-repeat="item in things" class="item">
   <h2>{{item.title}}</h2>
   <div ng-repeat="input in item.form.input">
       <input type="text" />
   </div>
   <button ng-click="cloneInput(item)">Clone</button>
</div>

当按下 Clone 按钮时，我将一个新元素推送到 form.input 数组并向 DOM 添加一个新输入。

我想要 $http.post 输入的所有值。

我知道推送我需要用到的东西

$http.post('/path/to/my/api', {my object}).callback()

但我不知道如何从所有 .item 输入中创建对象。

有人可以向我解释如何做或提出更好的解决方案吗？

Answer 1

如果您使用 ng-model 作为输入并将其设置为一个对象，您就可以将该对象注入 post，这是一个非常基本的示例：

JSFiddle

HTML:

<div ng-app="myApp" ng-controller="dummy">
    <div ng-repeat="input in items">
        <input type="text" name="{{input.name}}" ng-model="data[input.name]" />
    </div>
    <button ng-click="submit()">Submit</button>
    <p ng-show="displayIt">{{data}}</p>
</div>

JS:

angular.module('myApp', [])
    .controller('dummy', ['$scope', function ($scope) {
    $scope.items = [{
        name: 'test'
    }, {
        name: 'test2'
    }];

    $scope.data = {};
    $scope.displayIt = false;
    $scope.submit = function () {
        // This is only to check it
        $scope.displayIt = true;
        // Do your post here
    };

}]);

AngularJS 数据模型架构

AngularJS data model architecture

javascript

json

datamodel

angularjs