4
나는 내 자신의 학습 목적으로 간단한 angularJs 애플리케이션을 만들고 있습니다. 아래에 코드 스 니펫을 첨부했습니다. 두 개의 JSON 데이터가 있습니다.AngularJS 체크 박스가 제대로 작동하지 않습니다.
하나는 식료품 항목 및 사용자가 선택한 다른 항목의 모음을 나타냅니다. 선택한 데이터가 수집 데이터의 데이터와 일치하면 확인란을 선택 표시로 표시합니다. 확인란을 클릭하면 데이터를 삽입 할 수 있지만 임의로 선택을 취소하면 제대로 작동하지 않습니다. 내가 실수하는 곳에서 나를 바로 잡아 주셔서 감사합니다. 또한 데이터를 비교하는 쉬운 방법이 있다면 감사하겠습니다. JSON 여기서는 name을 사용하여 비교하고 있습니다. 내 예에서와 같이 name 또는 type을 언급하지 않고 JSON 내부의 개별 객체를 비교하는 다른 간단한 방법이 있습니까? angularJs 또는 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>