我正在为自己的学习目的创建一个简单的angularJs应用程序。我已经附上了下面的代码片段。我有两个JSON数据。
一个代表杂货商品的集合和用户选择的其他商品。如果所选数据与集合数据的数据匹配，我将复选框标记为已选中。我可以在单击复选框时插入数据，但是如果我随机开始取消选中，则它无法正常运行。我很感激你帮我纠正错误的地方。此外，如果有任何简单的方法来比较JSON数据，我将不胜感激。在这里，我使用name进行比较。有没有其他简单的方法来比较JSON中的单个对象，而不像我在我的例子中name或type那样提及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>
答案 0 :(得分：1)
您可以在groceryCollection中的项目上使用选定的标记。
这摆脱了toggleSelection，即减少到ng-click="item.selected = !item.selected"
和ng-checked只是item.selected。
所选项目只是简单地过滤为ng-repeat="selection in groceryCollection | filter: {selected:true}"
您所做的只是在选择过程中，我们只标记所选项目。
(function() {
angular.module("groceryApp", []).controller("groceryController", groceryControllerFunction);
groceryControllerFunction.$inject = ["$scope", "$filter"];
function groceryControllerFunction($scope, $filter) {
$scope.groceryCollection = groceryCollection;
$scope.addCustomItem = function() {}
}
var groceryCollection = [{
"name": "Tomato",
"type": "Roma"
}, {
"name": "Cauliflower",
"type": "Organic"
}, {
"name": "Apple",
"type": "Gala"
}, {
"name": "Orange",
"type": "Sweet n' Sour"
}, {
"name": "Grapes",
"type": "Wild"
}];
})();<!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="item.selected" ng-click="item.selected = !item.selected">
<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 groceryCollection | filter: {selected:true}">
<td>{{selection.name}}</td>
<td>{{selection.type}}</td>
</tr>
</table>
</div>
</body>
</html>