반응형
Angular에서 객체를 푸시하는 방법ngRepeat 어레이 간의 JS
그래서 Angular은 처음이에요.JS와 저는 ng-repeat 항목 목록을 만들고 선택한 항목을 다른 ng-repeat 목록에 푸시할 수 있는 매우 간단한 목록 앱을 만들려고 합니다.내 문제는 매우 간단해 보이지만, 나는 아직 적절한 해결책을 찾지 못했다.
간단한 마크업은 다음과 같습니다.
<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>
그리고 내 앵글이 간다JS 스크립트:
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;
};
});
그래서 버튼을 클릭하면 토글체크() 함수가 트리거되어 체크 리스트에 실제로 무언가가 푸시됩니다.하지만, 그것은 단지 빈 물체처럼 보인다.푸시하려는 실제 아이템을 함수가 가져올 수 없습니다.
내가 여기서 뭘 잘못하고 있는 거지?
메모: 버튼을 클릭하여 항목을 확인합니다.이 경우 체크박스를 사용하지 않습니다.
여기서 작업 모델을 보실 수 있습니다.http://jsfiddle.net/7n8NR/1/
건배, 노먼
메서드를 다음으로 변경합니다.
$scope.toggleChecked = function (index) {
$scope.checked.push($scope.items[index]);
$scope.items.splice(index, 1);
};
양쪽 리스트에서 같은 어레이를 사용하고, 목적을 달성하기 위해서 각도 필터를 작성하는 것이 훨씬 좋습니다.
http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters
테스트되지 않은 대략적인 코드는 다음과 같습니다.
appModule.filter('checked', function() {
return function(input, checked) {
if(!input)return input;
var output = []
for (i in input){
var item = input[i];
if(item.checked == checked)output.push(item);
}
return output
}
});
보기('버튼'도 추가)
<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 items | checked:true" class="item-checked">
<td><b>amount:</b> {{item.amount}} -</td>
<td><b>name:</b> {{item.name}} -</td>
<td>
<i>this item is checked!</i>
<button ng-click="item.checked = false">uncheck item</button>
</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 | checked:false" class="item-unchecked">
<td><b>amount:</b> {{item.amount}} -</td>
<td><b>name:</b> {{item.name}} -</td>
<td>
<button ng-click="item.checked = true">check item</button>
</td>
</tr>
</table>
</div>
<!-- end: LIST OF ITEMS -->
그러면 컨트롤러의 전환 방식 등이 필요하지 않습니다.
이것도 한번 써보세요.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to join two arrays.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
function myFunction() {
var hege = [{
1: "Cecilie",
2: "Lone"
}];
var stale = [{
1: "Emil",
2: "Tobias"
}];
var hege = hege.concat(stale);
document.getElementById("demo1").innerHTML = hege;
document.getElementById("demo").innerHTML = stale;
}
</script>
</body>
</html>언급URL : https://stackoverflow.com/questions/17098159/how-to-push-objects-in-angularjs-between-ngrepeat-arrays
반응형
'source' 카테고리의 다른 글
| WordPress - 업로드 시 이미지 흐림 (0) | 2023.02.14 |
|---|---|
| 워드프레스 필터 문서?add_filter()를 이해하려고 합니다. (0) | 2023.02.14 |
| AngularJS: 부모 스코프가 (격리된 스코프를 사용하여) 양방향 바인딩으로 업데이트되지 않음 (0) | 2023.02.14 |
| WordPress에서 wpdb 클래스를 사용하여 외부 데이터베이스 액세스 (0) | 2023.02.14 |
| 모델이 각도 입력의 날짜 개체가 아닙니다.JS (0) | 2023.02.14 |