I'm currently working on a basic AngularJS project to improve my skills. Below are the code snippets I've included. I have two sets of JSON data.
One set contains a list of grocery items, while the other set includes the items selected by the user. If the selected items match those in the collection, I want to mark the corresponding checkbox as checked. Inserting data upon checkbox click works fine, but if I randomly start unchecking items, it doesn't function properly. I'd appreciate any help to identify where I'm going wrong. I'd also like to know if there's a simpler way to compare JSON data. In my example, I'm using the name property for comparison. Is there a more straightforward way to compare individual objects inside the JSON without explicitly mentioning properties like name or type in AngularJS or JavaScript?
(function() {
angular.module("groceryApp", []).controller("groceryController", groceryControllerFunction);
groceryControllerFunction.$inject = ["$scope", "$filter"];
function groceryControllerFunction($scope, $filter) {
$scope.groceryCollection = groceryCollection_JSON;
$scope.selectedItems = selectedItems_JSON;
$scope.toggleSelection = function(item) {
var isRemoved = false;
if ($scope.selectedItems.length > 0) {
for (var i = 0; i < $scope.selectedItems.length; i++) {
if ($scope.selectedItems[i].name.indexOf(item.name) > -1) {
$scope.selectedItems.splice($scope.selectedItems.indexOf(item), 1);
isRemoved = true;
break;
}
console.log("Checking..." + $scope.selectedItems[i].name.indexOf(item.name));
}
}
// else {
if (!isRemoved) {
$scope.selectedItems.push(item);
}
// }
console.log($scope.selectedItems)
}
$scope.addCustomItem = function() {}
}
var groceryCollection_JSON = [{
"name": "Tomato",
"type": "Roma"
}, {
"name": "Cauliflower",
"type": "Organic"
}, {
"name": "Apple",
"type": "Gala"
}, {
"name": "Orange",
"type": "Sweet n' Sour"
}, {
"name": "Grapes",
"type": "Wild"
}];
var selectedItems_JSON = [{
"name": "Tomato",
"type": "Roma"
}];
})();<!DOCTYPE html>
<html ng-app="groceryApp">
<head>
<meta charset="utf-8">
<meta name="description" content="First Angular App">
<meta name="keywords" content="HTML, Javascript, AngularJs">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
<title>A simple AngularJs Application</title>
</head>
<body ng-controller="groceryController">
<h1>Welcome to my Grocery Store</h1>
<p>Select your items from the options below.</p>
<div ng-repeat="item in groceryCollection">
<input type="checkbox" id="{{item.name}}" value="{{item.name}}" ng-checked="selectedItems[$index].name.indexOf(item.name)>-1" ng-click="toggleSelection(item)">
<label for="{{item.name}}">{{item.name}}</label>
<input type="number" step="1" min="0" max="5" placeholder="Quantity" />
</div>
<p>
<input type="checkbox" id="others">
<label for="others">Others</label>
</p>
<p>Please Enter your item if not displayed in the list above:</p>
<p id="extraItems"> <span><input type="text" placeholder="Please Enter your Item" ng-model="customItem"/></span> <span><input type="text" placeholder="Please Enter your Item Type" ng-model="customItemType"/></span> <span><input type="number" step="1" min="0" max="5" placeholder="Quantity"/></span>
</p>
<p>
<input type="button" value="Add Item" ng-click="addItem();" />
</p>
<p> <a href="#">Add more items</a>
</p>
<div>
<p>Your selected items:</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
<tr ng-repeat="selection in selectedItems">
<td>{{selection.name}}</td>
<td>{{selection.type}}</td>
</tr>
</table>
</div>
</body>
</html>