所以我是新的AngularJS,我试图构建一个非常简单的列表应用程序,其中我可以创建一个ng-repeat项目列表,然后将一个选定的项目到另一个ng重复列表。虽然我的问题似乎很简单,我还是找不到一个合适的解决方案。
所以这里是简化的标记:
<body ng-app="MyApp"> <div id="MyApp" ng-controller="mainController"> <div id="AddItem"> <h3>Add Item</h3> <input value="1" type="number" placeholder="1" ng-model="itemAmount"> <input value="" type="text" placeholder="Name of Item" ng-model="itemName"> <br/> <button ng-click="addItem()">Add to list</button> </div> <!-- begin: LIST OF CHECKED ITEMS --> <div id="CheckedList"> <h3>Checked Items: {{getTotalCheckedItems()}}</h3> <h4>Checked:</h4> <table> <tr ng-repeat="item in checked" class="item-checked"> <td><b>amount:</b> {{item.amount}} -</td> <td><b>name:</b> {{item.name}} -</td> <td> <i>this item is checked!</i> </td> </tr> </table> </div> <!-- end: LIST OF CHECKED ITEMS --> <!-- begin: LIST OF UNCHECKED ITEMS --> <div id="UncheckedList"> <h3>Unchecked Items: {{getTotalItems()}}</h3> <h4>Unchecked:</h4> <table> <tr ng-repeat="item in items" class="item-unchecked"> <td><b>amount:</b> {{item.amount}} -</td> <td><b>name:</b> {{item.name}} -</td> <td> <button ng-click="toggleChecked($index)">check item</button> </td> </tr> </table> </div> <!-- end: LIST OF ITEMS --> </div> </body>
这里是我的AngularJS脚本:
var app = angular.module("MyApp",[]); app.controller("mainController",function ($scope) { // Item List Arrays $scope.items = []; $scope.checked = []; // Add a Item to the list $scope.addItem = function () { $scope.items.push({ amount: $scope.itemAmount,name: $scope.itemName }); // Clear input fields after push $scope.itemAmount = ""; $scope.itemName = ""; }; // Add Item to Checked List and delete from Unchecked List $scope.toggleChecked = function (item,index) { $scope.checked.push(item); $scope.items.splice(index,1); }; // Get Total Items $scope.getTotalItems = function () { return $scope.items.length; }; // Get Total Checked Items $scope.getTotalCheckedItems = function () { return $scope.checked.length; }; });
所以当我点击按钮,我的toggleChecked()函数触发器,它实际上是推动我的检查列表。但是,它似乎只是一个空对象。该函数无法获取我想推送的实际项目。
我在这里做错了什么?
注意:打算通过单击按钮检查项目。在这种情况下,我不想使用复选框。
你可以在这里看到工作模型:http://jsfiddle.net/7n8NR/1/
干杯,
诺曼
将方法更改为:
原文链接:https://www.f2er.com/angularjs/145845.html$scope.toggleChecked = function (index) { $scope.checked.push($scope.items[index]); $scope.items.splice(index,1); };