AngularJS复选框无法正常工作
[英]AngularJS checkbox not working properly
问题描述
I am creating a simple angularJs application for my own learning purpose. 
我正在为自己的学习目的创建一个简单的angularJs应用程序。 I have attached the code snippets below. 我已经附上了下面的代码片段。 I have two JSON data. 我有两个JSON数据。
One represents the collection of grocery items and other the items that user selected. 一个代表杂货项目的集合和用户选择的其他项目。 If the selected data matches to that of collection data, I am marking the checkbox as checked. 如果所选数据与集合数据的数据匹配，我将复选框标记为已选中。 I can insert the data on click of the checkbox, but if I randomly start to uncheck, it is not functioning properly. 我可以在单击复选框时插入数据，但如果我随机开始取消选中，则它无法正常运行。 I would appreciate your help for correcting me where I am making mistake. 我很感激你帮我纠正错误的地方。 Also, I would appreciate if there is any easy way of comparing JSON data. 此外，如果有任何简单的方法来比较JSON数据，我将不胜感激。 Here I am using name to compare. 在这里，我使用name进行比较。 Is there any other simple way of comparing the individual object inside JSON , without mentioning name or type as I did in my example, in angularJs or Javascript ? 有没有其他简单的方法来比较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>
1 个解决方案
解决方案1
1 已采纳 2017-01-04 04:23:32
You can just use selected flag on the items inside groceryCollection. 您可以在groceryCollection中的项目上使用选定的标志。
This gets rid of toggleSelection ie reduces to ng-click="item.selected = !item.selected" 这摆脱了toggleSelection即减少到ng-click="item.selected = !item.selected"
and ng-checked is just item.selected . 和ng-checked只是item.selected 。
The selected items simply filtered as ng-repeat="selection in groceryCollection | filter: {selected:true}" 所选项目只需过滤为ng-repeat="selection in groceryCollection | filter: {selected:true}"
All you are doing is in this process of selection we are only marking items that are selected. 您所做的只是在选择过程中，我们只标记所选项目。
(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.