Ist dies nur mit Winkelform möglich?

Also, ich habe dieses Formular, mit AngularJS here gemacht, die im Grunde lassen Sie mich ein Kaufobjekt erstellen an einen Server senden, dh ich kann wählen Sie ein Geschäft, wo ich einige Artikel gekauft, ein "Kaufdatum" ((nur ein Textfeld für jetzt), und füge diese Objekte dem Objekt hinzu, das ich sende.Ist dies nur mit Winkelform möglich?

Nach dem Absenden-Button wird gezeigt, wie das Modell, das ich senden werde aussehen wird, mit der ID des Ladens, die "Datetime", und ein Array von Elementen.

Meine Frage ist: Gibt es eine Möglichkeit, diese Form nur mit angular-formly zu tun?

Die Frage entsteht, weil ich formlys Dokumente gelesen habe und ich nicht herausgefunden habe, wie man es so ein dynamisches Modell schafft, wie diese Form, dh mit einem Array von Artikeln des Kaufs variabler Länge, oder wenn es überhaupt möglich ist.

Vielen Dank im Voraus für jede Ahnung, können Sie sich diese Frage zu beantworten :)

Der Code für das Formular wird wie folgt:

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

Die HTML-Seite:

<!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>

Der Controller:

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

Quelle

2016-04-17 Jose Ramirez

Ja ist es möglich.Ich habe etwas Ähnliches erstellt.Sie müssen einen Blick auf wiederholte Abschnitte in Angular Formly. [Link] (http://angular-formly.com/#/example/advanced/Wiederholungsabschnitt) –

Wie @Satej kommentierte, war es mit wiederholten Abschnitten. Danke :)

Quelle

2016-09-29 12:20:59

Ist dies nur mit Winkelform möglich?

Antwort

Verwandte Themen