angularjs中基于动态行添加+下拉的选择答案

【问题标题】：Dynamic Row add + drop down based selection in angularjsangularjs中基于动态行添加+下拉的选择
【发布时间】：2015-05-11 19:02:13
【问题描述】：

对angularjs很陌生，如果容易理解请见谅。

我想为输入字段创建动态行，使用 angularjs 的 ng-repeat 组合框。当我们从组合框中选择一个项目时，它将显示该特定产品的 uom,product_mrp。当输入数量时，它的计算显示在另一列中。现在我的问题是，当我单击添加新行时，它将添加一行，当我们在该特定行中选择组合框时，它将覆盖文本框中先前行的值

我的 HTML 代码

    <!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="angular.js@1.2.x" 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

【问题讨论】：

对不起先生..下面我再次发布了我的问题..请给我解决方案

标签： javascript angularjs

【解决方案1】：

您不应修改$scope.product 对象，而应使用row 来存储选定的值。这里我稍微修改了你的代码。

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

【讨论】：

我在表格中有很多 td，其中一些 td 是可编辑的，有些是不可编辑的。那些不可编辑的应该从第一行复制。其余场景与您的演示相同。所以我通过处理第一个数组来创建新行。但它没有创建新模型。你如何创建新模型？