CODEWITHSUNDEEP
javascriptangularjs
Kiran
Kiran

Reputation: 879

How to assign dynamic text box values to corresponding models

In my angular js application there are text boxes users can add dynamically and update the data. How to map those to the modals. Here is the simple problem that I derived from my current usecase.

    <tr ng:repeat="item in invoice.items">
        <td><input type="text" ng:model="personInfo.item.description"class="input-small"></td>           
        <td><input type="number" ng:model="personInfo.item.qty" ng:required class="input-mini"></td>
        <td><input type="number" ng:model="personInfo.item.cost" ng:required class="input-mini"></td>
        <td>{{item.qty * item.cost | currency}}</td>
        <td>
            [<a href ng:click="removeItem($index)">X</a>]
        </td>
    </tr>

http://jsfiddle.net/kiranmca04/d81fzLzf/1/

I need to below json format when the user submit the page. Complete html file you can find in jsfiddle.

{info:[ name: 'Albert', age: '33', items": [ { "desc": "test1", "qty": 1, "cost":33,}, { "desc": "test2", "qty": 2, "cost":4,}, { "desc": "test3", "qty": 1, "cost":1,} ]
] }

Upvotes: 0

Views: 154

Answers (1)

George Chen
George Chen

Reputation: 6939

jsfiddle

based on your code, personInfo should be a single object, not an array

var personInfo = {
    items: []
}

$scope.addItem = function() {
    personInfo.items.push({
        qty: 1,
        description: '',
        cost: 0
    });
},
$scope.removeItem = function(index) {
    personInfo.items.splice(index, 1);
},

$scope.total = function() {
    var total = 0;
    angular.forEach(personInfo.items, function(item) {
        total += item.qty * item.cost;
    })

    return total;
}
$scope.personInfo = personInfo

$scope.saveData = function (personInfo)
{
    alert(JSON.stringify(personInfo));
    console.log('info '+JSON.stringify(personInfo));
}

<tr ng:repeat="item in personalInfo.items">
    <td><input type="text" ng:model="item.description"class="input-small"></td>           
    <td><input type="number" ng:model="item.qty" ng:required class="input-mini"></td>
    <td><input type="number" ng:model="item.cost" ng:required class="input-mini"></td>
    <td>{{item.qty * item.cost | currency}}</td>
...

Upvotes: 1

Related Questions