表格内容在每一行中都是独立的

Question

我有一个按钮来向表中添加新行，我的问题是ng模型的值。它的目标是从下拉列表中选择一个选项，在其他字段中显示来自该项目的所有数据，以及创建新行时，所有ng模型具有相同的值。如果您选择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++; 
};