Можно ли использовать только углообразно?

Итак, у меня есть эта форма, сделанная с помощью AngularJS here, что в основном позволяет мне создать объект покупки для отправки на сервер, т. Е. Позволяет мне выбрать магазин, где я купил некоторые предметы, установить «дату покупки» (просто текстовое поле) и добавьте эти объекты в объект, который я отправлю.Можно ли использовать только углообразно?

После кнопки отправки показано, как будет выглядеть модель, которую я собираюсь отправить, с указанием идентификатора магазина, «даты и времени» и массива элементов.

Мой вопрос: есть ли способ сделать эту форму, используя только угловую форму?

Вопрос возникает из-за того, что я читал документы формально, и я не понял, как создать такую динамическую модель, как эта форма, т. Е. С массивом элементов переменной длины, или если это вообще возможно.

Заранее спасибо за любую подсказку вы можете дать мне ответить на этот вопрос :)

Код формы выглядит следующим образом:

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

источник

2016-04-17 Jose Ramirez

Да, возможно. Я создал что-то подобное. Вам нужно взглянуть на повторяющиеся разделы в Angular Formly. [Ссылка] (http://angular-formly.com/#/example/advanced/повторяющееся сечение) –

Как заметил @Satej, это было с повторными разделами. Спасибо :)

источник

2016-09-29 12:20:59

Можно ли использовать только углообразно?

ответ

Смежные вопросы