Существуют действительно лучшие способы структурирования кода, но в итоге вы должны сделать так, чтобы ваш массив продуктов содержал объекты со всеми необходимыми свойствами (имя, количество и цена), а когда вы добавляете элемент, вы просто выдвигаете весь новый объект в массив, а не просто имя. Наличие объекта в вашем ng-repeat означает, что теперь вам нужно получить доступ к свойствам, соответствующим образом отображаемым в вашем представлении. Пожалуйста, посмотрите фрагмент кода
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = [{
name: "Milk",
quantity: 1,
price: 2.00
},
{
name: "Bread",
quantity: 2,
price: 4.00
},
{
name: "Cheese",
quantity: 3,
price: 6.00
}
];
$scope.quantity = 1;
$scope.getTotal = function() {
var total = 0;
for (var i = 0; i < $scope.products.length; i++) {
total += $scope.products[i].quantity * $scope.products[i].price;
}
return total;
}
$scope.addItem = function() {
$scope.errortext = "";
if (!$scope.addMe) {
return;
}
if (true /*need a new way to check for duplicates */ ) {
$scope.products.push({
name: $scope.addMe,
quantity: $scope.quantity || 0,
price: $scope.price || 0
});
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function(x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
<header class="w3-container w3-light-grey w3-padding-16">
<h3>My Shopping List</h3>
</header>
<ul class="w3-ul">
<li><input type="text" name="price" class="price" style="width: 50px" /></li>
<li ng-repeat="x in products" class="w3-padding-16">{{x.name}} |
<input style="width: 50px" type="number" ng-model="x.quantity" min="0"> | $
<input style="width: 50px" type="number" ng-model="x.price" min="0"> | Subtotal ${{x.quantity * x.price}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
</ul>
Total ${{getTotal()}}
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<div class="w3-col s10">
<input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
<input placeholder="Quantity" ng-model="quantity" type="number" min="1">
<input placeholder="Price" ng-model="price" type="number" min="1">
</div>
<div class="w3-col s2">
<button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
</div>
</div>
<p class="w3-text-red">{{errortext}}</p>
</div>
</div>
</body>
</html>