Question

所以，我有这个表格，使用AngularJS here制作，它基本上让我创建一个购买对象发送到服务器，即，它让我选择一个商店，我买了一些项目，设置“购买日期“（现在只是一个文本字段），并将这些项目添加到我要发送的对象中。

在提交按钮后，会显示我要发送的模型的样子，显示商店的ID，“日期时间”和项目数组。

我的问题是：有没有办法只使用角度形式来做这个形式？

问题出现了，因为我一直在阅读形式上的文档，我还没有弄清楚如何使它创建这样一个动态模型，就像这个表单那样，即，使用可变长度的购买项目数组，或者如果可能的话。

提前感谢任何线索，你可以给我回答这个问题：）

表格的代码如下：

(function(){
    var app = angular.module('test', []);
})();

html页面：

    <!DOCTYPE html>
    <html>

    <head>
      <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
      <script src="inab.js"></script>
      <script src="PurchaseCtrl.js"></script>
    </head>

    <body ng-app="test">
      <div ng-controller="PurchaseCtrl" class="col-md-4">
            <h2>Purchase</h2>
            <div class="panel panel-default">

              <div class="panel-heading">Title</div>

              <div class="panel-body">

                <div class="form-group">
                  <label>Store</label>
                  <select class="form-control" ng-model="model.store">

                    <option ng-repeat="store in stores" value="{{store.id}}">{{store.name}}</option>
                  </select>
                </div>

                <div class="form-group">
                  <label>date-time</label>
                  <input class="form-control" type="text" ng-model="model.datetime"/>
                </div>

                <div ng-repeat="item in items">
                  <div class="form-group">
                    <div class="col-sm-2">
                      <label>{{item.label}}</label>
                    </div>
                    <div class="col-sm-8">
                      <input class="form-control" type="text" ng-model="item.nome" />
                    </div>
                    <div class="col-sm-2">
                      <button type="submit" class="btn btn-alert submit-button col-md-2" ng-click="removeItem()">remove item</button>
                    </div>
                  </div>
                </div>

                <button ng-click="addItem()">Add item</button>
              </div>
            </div>
            <button type="submit" class="btn btn-primary submit-button" ng-click="onSubmit()">Submit</button>
            <pre>{{model | json}}</pre>
          </div>
    </body>

  </html>

控制器：

(function(){
  angular.module('test').controller('PurchaseCtrl', ['$scope', function(scope){

    scope.stores = [{id: 1, name:'Store 1'}, {id: 2, name: 'Store 2'}];

    scope.items = [];

    scope.datetime = '';

    scope.store = '';

    var i = 0;

    scope.model = {
      store: scope.store,
      datetime: scope.datetime,
      items: scope.items
    };

    scope.addItem = function(){
      scope.items.push({label: 'algo' + (i++), nome:''});
    }

    scope.removeItem = function(){
      scope.items.splice(scope.items.length - 1);
    }

    scope.onSubmit = function(){
      console.log(scope.model);
    }
  }]);
})();

Answer 1

正如@Satej评论的那样，它是重复的部分。谢谢:)）

这是否可能只使用角度形式？

1 个答案: