4
私は自分の学習目的のために簡単なangularJsアプリケーションを作成しています。私は以下のコードスニペットを添付しています。私は2つのJSONデータを持っています。AngularJSチェックボックスが正しく機能しない
1つは、食料雑貨品目のコレクション、およびユーザーが選択したその他のアイテムを表します。選択したデータがコレクションデータのデータと一致する場合は、チェックボックスをオンにしてマークします。私はチェックボックスをクリックしてデータを挿入することができますが、私がランダムにチェックを外すと、正常に機能していません。私が間違っているところで私を訂正するためのあなたの助けに感謝します。また、データを比較する簡単な方法があるのであれば、私は感謝しています。JSONここで私は比較するためにnameを使用しています。私の例で行ったように、nameまたはtypeを言及することなく、angularJsまたはJavascriptにある個々のオブジェクトをJSON内で比較する他の簡単な方法はありますか？
(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>