ng-click을 사용하여 어레이에서 아이템 또는 오브젝트를 삭제하려면 어떻게 해야 합니까?
했을 때 할 수 이 되는 것 . - 요?용하하??? ???$digest
HTML 및 app.js:
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
, 을 제거할 수 .이것에 합격할 수 있습니다.bday항목을 마크업에서 제거 함수에 추가합니다. 다음 에서 항목 합니다.
<a class="btn" ng-click="remove(item)">Delete</a>
다음으로 컨트롤러:
$scope.remove = function(item) {
var index = $scope.bdays.indexOf(item);
$scope.bdays.splice(index, 1);
}
는 Angular에 대한 합니다.bdays및 array 업데이트를 합니다.ng-repeat
데모: http://plnkr.co/edit/ZdShIA?p=preview
하여 라이브업데이트를 를 사용하여 합니다.$resource하기 위해 를 업데이트합니다.
정답은 다음과 같습니다.
<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){
$scope.bdays.splice($index,1);
}
@charlietfl char @ @ @ @ @ @charlietfl 。가 것 $index파라미터로 사용하지만 컨트롤러에서 위시를 대신 사용합니다.해 주세요
ng-repeat 안에 있는 경우
1개의 라이너 옵션을 사용할 수 있습니다.
<div ng-repeat="key in keywords">
<button ng-click="keywords.splice($index, 1)">
{{key.name}}
</button>
</div>
$index angular를 하여 angular 내부 .ng-repeat
「」를 사용합니다.$index기본 케이스에서는 완벽하게 동작합니다.@charlietfl을 선택합니다.하지만 때로는.$index충분하지 않습니다.
1개의 어레이를 2개의 다른ng-repeat으로 나타냅니다.이러한 ng-repeat 중 하나는 truthy 속성을 가진 객체에 대해 필터링되고 다른 하나는 false 속성을 위해 필터링됩니다.1개의 원래 어레이에서 파생된2개의 다른 필터 어레이가 제시되어 있습니다(또는 시각화하는 데 도움이 되는 경우, 1개의 어레이의 여성용 ng반복과 같은 어레이의 남성용 ng반복).목표는 필터링된 어레이 멤버의 정보를 사용하여 원래 어레이에서 확실하게 삭제하는 것입니다.
필터링된 각 어레이에서 $index는 원래 어레이 내의 아이템 인덱스가 아닙니다.필터링된 하위 배열의 인덱스가 됩니다.그래서 원본에서 그 사람의 인덱스를 알 수 없습니다.people $만 알 수women ★★★★★★★★★★★★★★★★★」men한 모든 .그것을 사용해 삭제하면, 원하는 장소를 제외한 모든 장소에서 아이템이 사라집니다.엇을을 해???
각 할 수 $ ID를 $index는 $index입니다.splice(만, 그 식별자가 붙어 있습니다.)지만면면면면면면면면면?
Angular는 Angular라는 고유한 ng 각시킵니다.$$hashKey을 찾을 수 있습니다.$$hashKey이치노
:$$hashKey는 구현 세부사항으로, ng-repeat용으로 공개된 API에는 포함되지 않습니다.그들은 언제든지 그 재산에 대한 지원을 제거할 수 있다. 아마 거예요. 라고 하다. :-)
$scope.deleteFilteredItem = function(hashKey, sourceArray){
angular.forEach(sourceArray, function(obj, index){
// sourceArray is a reference to the original array passed to ng-repeat,
// rather than the filtered version.
// 1. compare the target object's hashKey to the current member of the iterable:
if (obj.$$hashKey === hashKey) {
// remove the matching item from the array
sourceArray.splice(index, 1);
// and exit the loop right away
return;
};
});
}
호출 대상:
ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"
on에서 키를 : 음음음음 edit edit 。$$hashKey모델 고유의 속성 이름 대신, 에는 이 기능을 다른 모델과 컨텍스트에서 재사용할 수 있도록 하는 중요한 이점도 있습니다.어레이 레퍼런스 및 아이템 레퍼런스와 함께 제공하면 정상적으로 동작합니다.
저는 보통 이런 스타일로 글을 씁니다.
<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove = function(index){
$scope.[yourArray].splice(index, 1)
};
이것이 도움이 되기를 바랍니다. $scope에서 [your Array] 사이에 점(.)을 사용해야 합니다.
답변을 으로, 은 「」, 「」와 합니다.ngRepeat,filter이데올로기 때문에
컨트롤러:
vm.remove = function(item, array) {
var index = array.indexOf(item);
if(index>=0)
array.splice(index, 1);
}
표시:
ng-click="vm.remove(item,$scope.bdays)"
컨트롤러 없이 구현합니다.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
</script>
<div ng-app="myShoppingList" ng-init="products = ['Milk','Bread','Cheese']">
<ul>
<li ng-repeat="x in products track by $index">{{x}}
<span ng-click="products.splice($index,1)">×</span>
</li>
</ul>
<input ng-model="addItem">
<button ng-click="products.push(addItem)">Add</button>
</div>
<p>Click the little x to remove an item from the shopping list.</p>
</body>
</html>splice() 메서드는 배열에서 항목을 추가하거나 제거합니다.
array.splice(index, howmanyitem(s), item_1, ....., item_n)
index: 필수입니다.항목을 추가하거나 제거할 위치를 지정하는 정수입니다. 음수 값을 사용하여 배열 끝에서 위치를 지정합니다.
항목 수:선택적.삭제할 항목의 수.0으로 설정하면 항목이 제거되지 않습니다.
item_1, ..., item_n: 옵션.어레이에 추가할 새 항목
컨트롤러에서 메서드를 호출하는 것에 동의하지 않습니다.실제 기능에는 서비스를 사용해야 하며 scalability 및 모듈러 기능에 대한 디렉티브를 정의하고 디렉티브에 삽입하는 서비스에 콜을 포함하는 클릭이벤트를 할당해야 합니다.
예를 들어, 당신의 HTML에서...
<a class="btn" ng-remove-birthday="$index">Delete</a>
그런 다음 지시문을 만듭니다...
angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){
return function(scope, element, attrs){
angular.element(element.bind('click', function(){
myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope);
};
};
}])
그럼 당신 봉사를 하면...
angular.module('myApp').factory('myService', [function(){
return {
removeBirthday: function(birthdayIndex, scope){
scope.bdays.splice(birthdayIndex);
scope.$apply();
}
};
}]);
이렇게 코드를 올바르게 작성하면 코드를 재구성하지 않고도 향후 변경 사항을 쉽게 작성할 수 있습니다.사용자 지정 지시어를 사용하여 바인딩함으로써 사용자 지정 클릭 이벤트를 올바르게 처리하고 있습니다.
예를 들어, 고객이 "이봐, 이제 서버를 호출해서 빵을 만들고 나서 팝업을 모달로 만들자."라고 말하는 경우.HTML 및/또는 컨트롤러 방식 코드를 추가 또는 변경하지 않고도 서비스 자체에 쉽게 접근할 수 있습니다.컨트롤러에 한 줄만 있으면 결국 고객이 요구하는 무거운 리프팅까지 기능을 확장하기 위해 서비스를 사용해야 합니다.
또, 다른 「Delete」버튼이 필요한 경우는, 다이렉트 속성(「ng-remove-birthday」)을 사용해 페이지의 임의의 요소에 간단하게 할당할 수 있습니다.이를 통해 모듈러형으로 재사용할 수 있게 되었습니다.이는 Angular 2.0의 HEADY 웹 컴포넌트 패러다임을 다룰 때 유용합니다.2.0에는 컨트롤러가 없습니다. : )
행복한 개발!!!
여기 또 다른 답이 있다.도움이 되었으면 좋겠어요.
<a class="btn" ng-click="delete(item)">Delete</a>
$scope.delete(item){
var index = this.list.indexOf(item);
this.list.splice(index, 1);
}
array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)
항목에 ID 또는 특정 필드가 있는 경우 필터()를 사용할 수 있습니다. 필터()는 Where()와 같은 역할을 합니다.
<a class="btn" ng-click="remove(item)">Delete</a>
컨트롤러 내:
$scope.remove = function(item) {
$scope.bdays = $scope.bdays.filter(function (element) {
return element.ID!=item.ID
});
}
Pass the id that you want to remove from the array to the given function
컨트롤러(기능은 같은 컨트롤러에 있어도 서비스 상태로 유지하는 것을 선호함)
function removeInfo(id) {
let item = bdays.filter(function(item) {
return bdays.id=== id;
})[0];
let index = bdays.indexOf(item);
data.device.splice(indexOfTabDetails, 1);
}
한 방법은 그냥 덧셈을 하면 .bdays.splice($index, 1)[어느 쪽인가]
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="bdays.splice($index, 1)">Delete</a>
</form>
</li>
</ul>
언급URL : https://stackoverflow.com/questions/15453979/how-do-i-delete-an-item-or-object-from-an-array-using-ng-click
'programing' 카테고리의 다른 글
| 사용자 지정 후크 반환 값을 시뮬레이션하려면 어떻게 해야 합니다. (0) | 2023.04.02 |
|---|---|
| Spring Boot 로고를 Nyan Cat으로 변경하는 방법 (0) | 2023.04.02 |
| jQuery.easing[j]Query.easing.def]가 함수가 아닙니다. (0) | 2023.04.02 |
| 대응: useState 또는 useRef? (0) | 2023.04.02 |
| @RibbonClient와 @LoadBalanced의 차이점 (0) | 2023.04.02 |