Dynamic Row add + drop down based selection in angularjs

Question

Very new to angularjs, so please forgive me if it is easy one.

I want to create dynamic rows for input fields,combobox using angularjs's ng-repeat . When we choose an item from combobox it will display uom,product_mrp of that particular product. and when quantity is typed its calculation is displayed in another column.Now My problem is, When i click on add new row,it will add one row and when we select combo box in that particular row it will override the previous rows values in textbox

My Html Code

    <!DOCTYPE html>
    <html ng-app="plunker">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="[email protected]" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
        <script src="script.js"></script>
      </head>

    <body>
      <div  ng-controller="MainCtrl">
        <table frame="box" rules="all">
          <thead>


            <tr>

              <th>Description</th>`enter code here`
              <th>Quantity</th>
              <th>UOM</th>
              <th>Unit Price</th>
              <th>Amount</th>
              <th>Remarks</th>
              <th></th>
            </tr>
          </thead>
          <tbody>

            <tr></tr>
            <tr ng-repeat="r in rows">
              <td>
                <select ng-model="p.item_description" ng-change="getProductDetails(p.item_description)" ng-options="p.item_code as p.item_description for p in product">
                  <option value="">Select Product</option>
                </select>
              </td>
              <td>
                <input type="text" style="width: 80px" ng-model="p.quantity" value="0" />
              </td>
              <td>
                <input type="text" disabled="disabled" style="width: 80px" ng-model="nrows.uom" />
              </td>
              <td>
                <input type="text" style="width: 80px" disabled="disabled" ng-model="nrows.product_mrp" value="0" />
              </td>
              <td>{{r.amount=p.quantity*nrows.product_mrp| currency}}</td>

              <td>
                <textarea name="message" id="message" class="form-control" rows="2" cols="20" required="required" placeholder="Remarks" ng-model="r.remarks"></textarea>
              </td>
              <td>


                <div class="text-center">
                  <button ng-click="addRow()">Add Row</button>

                </div>
              </td>
            </tr>

            <tr>


              <td></td>
              <td></td>
              <td></td>
              <td>
                <h4>TOTAL :</h4>
              </td>
              <td>
                <h4>
                                                <strong>{{total_amount() |currency}}</strong>
                                            </h4>
              </td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </body>

    </html>

Javascript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.rows = [{}];
  $scope.nrows = [];
  $scope.addRow = function() {
    $scope.rows.push({

    });

  };
    $scope.getProductDetails=function(id){

    angular.forEach($scope.product, function(p) {

            if(p.item_code==id)
                {
                $scope.nrows.uom=p.uom;
                $scope.nrows.product_mrp=p.product_mrp;
                console.log(p.item_description+" "+p.uom+" "+p.product_mrp);
                }
            else
                {

                }



        })
    }
    $scope.total_amount = function() {

        var total = 0;
        $scope.rows.forEach(function(row) {

            total += row.amount;

        })

        return total;
    }


$scope.product= [{
    "item_code": 1001,
    "uom": "Nos.",
    "product_mrp": 12,
    "item_description": "CHOCO FILL 250GM"
  }, {
    "item_code": 1002,
    "uom": "Nos.",
    "product_mrp": 38,
    "item_description": "LUX GOLD 75GM"
  }, {
    "item_code": 1003,
    "uom": "Nos.",
    "product_mrp": 20,
    "item_description": "CHOCO BAR"
  }, {
    "item_code": 1004,
    "uom": "Nos.",
    "product_mrp": 15,
    "item_description": "CASATA"
  }, {
    "item_code": 1005,
    "uom": "Nos.",
    "product_mrp": 12,
    "item_description": "GOOD DAY 100GM"
  }, {
    "item_code": 1006,
    "uom": "Nos.",
    "product_mrp": 18,
    "item_description": "Garam Masala"
  }, {
    "item_code": 1007,
    "uom": "Nos.",
    "product_mrp": 25,
    "item_description": "VIVEL SOFT 75GM"
  }, {
    "item_code": 1008,
    "uom": "Nos.",
    "product_mrp": 45,
    "item_description": "SUNLIGHT 500GM"
  }, {
    "item_code": 1009,
    "uom": "Nos.",
    "product_mrp": 65,
    "item_description": "Dove 75gm"
  }, {
    "item_code": 1010,
    "uom": "Nos.",
    "product_mrp": 38,
    "item_description": "NIRMA 250GM"
  }, {
    "item_code": 1011,
    "uom": "Nos.",
    "product_mrp": 150,
    "item_description": "FOUNDATION CREAM"
  }]
});

http://plnkr.co/edit/iip3u8BrXgWi0is60iFq?p=preview

Am sorry sir..below i posted my question again.. please give me solution — Geethu
– Geethu, Commented May 11, 2015 at 10:31

Satpal · Accepted Answer · 2015-05-11 11:02:13Z

2

You should not modify the $scope.product object, Instead you should use row to store selected value. Here I have slightly modified your code.

JavaScript

$scope.getProductDetails = function(row) {
    angular.forEach($scope.product, function(p) {
        if (p.item_code == row.item_code) {
            row.uom = p.uom;
            row.product_mrp = p.product_mrp;
        }
    })
}

HTML

<tr ng-repeat="r in rows">
    <td>
        <select ng-model="r.item_code" ng-change="getProductDetails(r)" ng-options="p.item_code as p.item_description for p in product">
            <option value="">Select Product</option>
        </select>
    </td>
    <td>
        <input type="text" ng-model="r.quantity" />
    </td>
    <td>
        <input type="text" ng-model="r.uom" />
    </td>
    <td>
        <input type="text" ng-model="r.product_mrp" />
    </td>
    <td>{{r.amount=r.quantity*r.product_mrp| currency}}</td>
</tr>

DEMO

answered May 11, 2015 at 11:02

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KumarHarsh Over a year ago

i have many td in table,out of which some td are editable and some are not editable.those not editable should be copied from first row.Rest of the scenario is same as in your demo. So i am creating new row by coping first array.But it not creating fresh model.How do you create fresh model ?

Collectives™ on Stack Overflow

Dynamic Row add + drop down based selection in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related