Vì vậy, tôi mới sử dụng AngularJS và tôi đang cố gắng xây dựng một ứng dụng danh sách rất đơn giản, nơi tôi có thể tạo danh sách mục ng lặp lại và sau đó đẩy một mục đã chọn vào một mục khác danh sách ng-lặp lại. Mặc dù vấn đề của tôi dường như rất đơn giản nhưng tôi đã không thể tìm ra một giải pháp phù hợp.Làm thế nào để đẩy các đối tượng trong AngularJS giữa các mảng ngRepeat
Vì vậy, đây là đánh dấu đơn giản:
<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>
Và đây đi AngularJS tôi Script:
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;
};
});
Vì vậy, khi tôi bấm nút, toggleChecked của tôi() chức năng gây ra và nó thực sự đẩy thứ gì đó vào danh sách đã kiểm tra của tôi. Tuy nhiên, nó có vẻ chỉ là một vật thể trống rỗng. Hàm không thể nhận được mục thực sự mà tôi muốn đẩy.
Tôi đang làm gì sai ở đây?
LƯU Ý: Kiểm tra các mục qua nhấp chuột vào nút được dự định. Tôi không muốn sử dụng hộp kiểm trong trường hợp này.
Bạn có thể xem mô hình làm việc ở đây: http://jsfiddle.net/7n8NR/1/
Chúc mừng, Norman
Tôi nghĩ về một cái gì đó tương tự như lúc đầu, nhưng tôi sợ rằng bộ điều khiển của tôi sẽ trở nên quá lộn xộn khi dự án trở nên phức tạp hơn. Ví dụ: nếu tôi sẽ thêm một trạng thái khác ngoài "được chọn" và "bỏ chọn" và sử dụng lại các mục với các trạng thái khác nhau trong các chế độ xem khác, mọi thứ sẽ khó khăn hơn. Giữ các mục của tôi được sắp xếp trong nhiều bộ điều khiển có thể sẽ giữ mã của tôi sạch sẽ hơn và sau này tôi sẽ linh hoạt hơn trong dự án. – VoodooDS