AngularJS: Removing the parent element
Question
I have li item that repeat, according to $scope.items list. In each li I have a checkbox. What I want to do is to catch the change event of this checkbox and do my work there. Executed in $scope.change function.
When my work done, I want to remove the row of the checked checkbox.
My code so far:
<!doctype html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('mainController', function($scope) {
$scope.items = ["item1", "item2", "item3"];
$scope.change = function() {
// My work here.
// ...
// Work is done. remove the caller checkbox.
this.parent.remove(); // <--- BOOM.
}
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="mainController">
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="checked" ng-change="change()">
</li>
</ul>
</div>
</body>
</html>
Live version is here: http://plnkr.co/edit/05IBKp6aVoj1SqFNi5JJ
My problem is in this code-line:
this.parent.remove(); // <--- BOOM.
My target is to remove the parent li .
Questions:
- How this can be done right?
- When I using the
thiskeyword (in controller.change function), is this something that I can use with JQuery syntax? Something like$(this).parent().remove();?
5 answers
solution1
5 2016-02-07 10:13:48
You can delete the item from $scope.items and it will be automatically removed and you don't need to use jQuery.
I updated the plunker http://plnkr.co/edit/3aYHQspeLAj3VryQAhBT?p=preview
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="checked" ng-change="change(item)">
</li>
and in JS
$scope.change = function(item) {
// Work is done. remove the caller checkbox.
var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);
}
solution2
4 ACCPTED 2016-02-07 10:27:42
Please have a look at this plunker, I have used ng-click to detect the change and I have passed the $event as the parameter.
<!doctype html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('mainController', function($scope) {
$scope.items = ["item1", "item2", "item3"];
$scope.change = function(e) {
// My work here.
// ...
console.log($(this));
console.log(e.target);
// Work is done. remove the caller checkbox.
$(e.target).parent().remove(); // Not working
}
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="mainController">
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="checked" ng-click="change($event)">
</li>
</ul>
</div>
</body>
</html>
solution3
3 2016-02-07 10:21:19
Please do following change.
HTML:
<ul> <li ng-repeat="item in items"> <input type="checkbox" ng-model="checked" ng-change="change($index)"> </li>
JS.
$scope.change = function(index) {
$scope.items.splice(index, 1);
}
Que.2
You can do this using jqLite and directive.
solution4
3 2016-02-07 10:24:42
Changed:
html:
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="checked" ng-click="change($event)">
</li>
</ul>
js:
$scope.change = function (e) {
angular.element(e.target).parent().remove();
};
solution5
1 2016-02-07 10:30:10
I am assuming you are trying to implement a simple checklist functionality.
You could pass the $index for onChange function and then use array.splice() method to perform the following action.
<!doctype html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('mainController', function($scope,$timeout) {
$scope.items = ["item1", "item2", "item3"];
$scope.prevItem ={
value: null,
index: null
}
$scope.change = function(index) {
$timeout(function(){
// Your work here.
$scope.prevItem.value = $scope.items[index];
$scope.prevItem.index = index;
$scope.items.splice(index, 1);
}, 300);
}
$scope.undoCheck = function(){
$scope.items.splice($scope.prevItem.index, 0, $scope.prevItem.value);
}
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="mainController">
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="checked" ng-change="change($index)">
{{item}}
</li>
</ul>
<button ng-click="undoCheck()">Undo Previous Check</button>
</div>
</body>
</html>
I have also added undo functionality to just help you get more clarity on splice function.
The timeout function is added to just show the check on the checkbox before removing it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.