I have a form I want to be able to add additional collections to as the user wants. For example, say they want to enter they have a pet with the pet details. They want to add another pet, and then another etc.
Similar to this <a class="postlink" href="https://blog.rsuter.com/asp-net-mvc-how-to-implement-an-edit-form-for-an-entity-with-a-sortable-child-collection/">https://blog.rsuter.com/asp-net-mvc-how ... ollection/</a>
But in a Angular way and that works with Metronic. Do you guys have any idea how I could accomplish something similar to that?
5 Answer(s)
-
0
Hi,
Did you have a problem with ng-repeat ? You can simply define a collection in your angular view model and use it in ng-repeat to create view html.
When you add an item to your collection, your ui must be updated.
You can even create a directive for repeating section.
The only problem might be validation. For that you can take a look at this stackoverflow question <a class="postlink" href="http://stackoverflow.com/questions/12044277/how-to-validate-inputs-dynamically-created-using-ng-repeat-ng-show-angular">http://stackoverflow.com/questions/1204 ... ow-angular</a>
-
0
I have no problem with ng-repeat. I just am such a newbie to Angular I don't really know all the ways to use it. Also I am not sure how to submit the collection with the rest of the form into my service endpoint. Any pointers on that?
-
0
Hi,
When you bind your model to ui with angular, as you know, it automatically changes values of your model. Assume that you have a model like this.
var model = { customerName:'', customerSurname:'', pets:[] }if you bind your model to view like this
<div> <label>Name</label> <input type="text" ng-model="model.customerName"> <label>Surname</label> <input type="text" ng-model="model.customerSurname"> <div ng-repeat="pet in pets"> <label>Name</label> <input type="text" ng-model="pet.name"> <label>Age</label> <input type="text" ng-model="pet.age"> </div> </div>Then you just send it to server like this on the click event of your save button
_nameOfYourService.save(model);
Of course you need to create necessary AppService and a matching DTO of your client side model on the server side.
-
0
Oh yes that makes complete sense. One of those duh moments. Thank you
-
0
No problem at all. Please let us know if you have any problems.
