foreach to foreach array in angularjs - angularjs

Question

I am trying to update specific data of an array that is being displayed thru ng-repeat.
Given the datas:
$scope.cartItems = [];
$scope.items = [{code: 'ABC', cash:'20.00', charge: '25.00'},
{code: 'DEF', cash:'10.00', charge: '15.00'},{code:
'GHI',cash:'30.00', charge: '35.00'}];
then i have this table
Item | Price | Action
ABC | 20.00 | Add
DEF | 10.00 | Add
ng-click="add(Item,Price)"
$scope.add = function(Item,Price){
var itemscart = {};
itemscart.code = Item;
itemscart.price = Price;
$scope.cartItems.push(itemscart)
}
and is being displayed like this thru html table.
ng-repeat="cart in cartItems"
Item | price | bracket
ABC | 20.00 | Cash //dropdown
DEF | 10.00 | Cash //dropdown
And i have this dropdown select tag with option value; "Cash" or "Charge"
If in the dropdown i selected charge. The expected output of the html table must be:
Item | price | braket
ABC | 25.00 | Charge //dropdown
DEF | 15.00 | Charge //dropdown
I have tried:
if($scope.optionval == 'Charge'){
var price = 0;
$scope.cartItems.forEach(function(v){
if(v.code == ($scope.items.forEach(function(c){c.code; price =
c.charge; })))
v.PRICE = price;
console.log(v.PRICE) //gets the last row
console.log(price) //null
});
}

Answer 1

As per your displayed and expected table, you can try something like:
On change of CASH to CHARGE, make a function call on ng-change in
which pass the selected object with selected 'braket'.
Then in function call you can filter data.

Answer 2

In my opinion you could use a different approach, like using ng-show or ng-if directives to get the results you are trying to achieve
Try adding a custom field in your $scope in order to store which price should be shown, then you have two choices: to modify every field or separately:
Display independiently:
app.js
$scope.items = [{code: 'ABC', cash:'20.00', charge: '25.00', displaying:'cash'},{...}
HTML
<tr>
<th>Item</th>
<th>Price</th>
<th></th>
</tr>
<tr ng-repeat="cart in whatever">
<td>{{cart.item}}</td>
<td ng-show="cart.displaying=='cash'>{{cart.cash}}</td>
<td ng-show="cart.displaying=='charge'>{{cart.charge}}</td>
<td>{{cart.displaying}}</td>
<td>*Dropdown to modify this specific 'displaying' field*</td>
</tr>
Every field at the same time:
app.js
$scope.displayingitems = 'cash'
HTML
*Dropdown to modify this specific 'displaying' field*
<tr>
<th>Item</th>
<th>Price</th>
<th></th>
</tr>
<tr ng-repeat="cart in whatever">
<td>{{cart.item}}</td>
<td ng-show="displayingitems=='cash'>{{cart.cash}}</td>
<td ng-show="displayingitems =='charge'>{{cart.charge}}</td>
<td>{{displayingitems}}</td>
<td></td>
</tr>