Question

我有一个按钮可以向表中添加新行，我的问题是ng-model值。当从下拉列表中选择一个选项时显示其目标，以显示其他字段中该项目的所有数据，并且当创建新行时，所有ng-model具有相同的值。如果您选择相同设备的2倍并且添加一个值，它在两者中都会更新，只需要在其中一个中更新。

以下是具有工作示例http://jsfiddle.net/z06sonnt/5/

的代码的当前状态示例

<div ng-app>
<div ng-controller="Ctrl" id="midi-ctrl">
<button ng-click="addRow()">Add Row</button>
<table>
  <tr>
    <th></th>
    <th>Type</th>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Notes</th>
    <th>Cost</th>
   </tr>
   <tr ng-repeat="row in rows">
    <td><strong>{{row.id}}</strong>
    </td>
    <td align="center">{{row.selectedItem.type}}</td>
    <td align="center">
      <select ng-model="row.selectedItem" ng-options="item.product for item in products">
        <option value="">Select Product</option>
      </select>
    </td>
    <td>{{row.selectedItem.price}} </td>
    <td align="center">
      <input style="width: 75px" ng-model="row.selectedItem.quantity" ng-change="calcPrice(row.selectedItem)" type='number'>
    </td>
    <td align="center">
      <input style="width: 75px" ng-model="row.selectedItem.notes">
    </td>
    <td align="center">
      <input style="width: 75px" ng-model="row.selectedItem.cost">$
    </td>
  </tr>
</table>
<b>rows</b>{{rows}}
<br>
<b>Products</b>{{products}}

Controller.js

  function Ctrl($scope) {
 $scope.rows = [{
id: '1',
selectedItem: []
}, {
id: '2',
selectedItem: []
}];
$scope.counter = 3;

$scope.calcPrice = function(item) {
item.cost = item.price * item.quantity;
};

$scope.addRow = function() {
$scope.newRow = {};
$scope.newRow['id'] = $scope.counter;
$scope.newRow['selectedItem'] = [];
$scope.rows.push($scope.newRow);
$scope.counter++;
};

$scope.products = [{
type: 'mobile',
product: 'Device A',
price: 70
}, {
type: 'games',
product: 'Device B',
price: 80
}, {
type: 'PC',
product: 'Device C',
price: 100
}, ];
}

Answer 1

您可以将所选项目作为rowContent中的对象。像这样的东西

<div class="col-lg-12" >
<button ng-click="addRow()">Add Row</button>
<table class="table table-bordered ">
    <tr>
        <th>ID</th>
        <th>Client</th>
        <th>Quantity</th>
        <th>Notes</th>
        <th></th>
        <th>Software Cost</th>
        <th>Labor</th>
        <th>Workflow</th>
    </tr>
    <tr ng-repeat="row in rows">
        <td align="center">{{row.id }}{{row.selectedItem.clientType}}</td>
        <td align="center"><select ng-model="row.selectedItem"
                                   ng-options="item.software for item in products">
            <option value="">Select Client</option>
        </select></td>
        <td align="center"><input ng-model="row.selectedItem.quantity" ng-change="calcLabor(row.selectedItem)"></td>
        <td align="center"><input ng-model="row.selectedItem.locations" ng-change="calcLabor(row.selectedItem)"></td>
        <td align="center"><input ng-model="row.selectedItem.notes"></td>
        <td align="center">{{(row.selectedItem.price)*(row.selectedItem.quantity)|currency}}</td>
        <td align="center"><input ng-model="row.selectedItem.labor">
            <a href="" data-toggle="modal"
               data-target="#image-modal">
                <button ng-click="imageShowModal(row.selectedItem)">Edit Formula</button>
            </a>
        </td>
        <td align="center"><input ng-model="row.selectedItem.workflow"></td>
        <td align="center"></td>
    </tr>
</table>
</div>

控制器

app.controller("appController", ["$scope", "$filter", function ($scope, $filter) {
    $scope.rows=[{ id:'1', selectedItem:[] }, { id:'2', selectedItem:[] }];
    $scope.counter=3;
    $scope.imageShowModal = function (item) {
    $scope.bedModal = item;
};

$scope.addRow = function() {
    $scope.newRow = {};
    $scope.newRow['id'] = $scope.counter;
    $scope.newRow['selectedItem'] = [];
    $scope.rows.push($scope.newRow);
    $scope.counter++;
};

表格内容独立于每一行

1 个答案: