AngularJS復選框無法正常工作
[英]AngularJS checkbox not working properly
問題描述
我正在為自己的學習目的創建一個簡單的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>
1 個解決方案
解決方案1
1 已采納 2017-01-04 04:23:32
您可以在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>
復選框選中/取消選中不能正常使用 angularjs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.