Very new Angular and super-confused as to how to use the $destroy method to remove an element as mentioned in the API doc here:

.$rootScope.Scope

Here is the HTML I tried:

<div ng-controller="TodosController">
    <div class="tasks" ng-show="todos">
        <ul ng-repeat="todo in todos">
            <li>              
                    <button ng-click="todos.$destroy(todo)">Delete</button>
                    <b>{{todo.name}}</b>                
            </li>
        </ul>
    </div>
</div>

And the JS:

var myApp = angular.module('myApp', []);

function TodosController($scope) {
    $scope.todos = [{
        name: "Learn angular",
        estimate: 8,
        done: true},
    {
        name: "Install java",
        estimate: 2,
        done: false},
    {
        name: 'Uninstall ruby',
        estimate: 3,
        done: false}];
}

Here is my fiddle for above: /

In older version of Angular, it is possible to use the $remove method to remove an element.

<script type="text/javascript" ng:autobind src=".9.16/angular-0.9.16.js"></script>

<div ng:controller="TodosController">
    <div class="tasks" ng:show="todos">
        <ul ng:repeat="todo in todos">
            <li>              
                <div ng:controller="TodoEditorController">
                    <button ng:click="todos.remove(todo)">Delete</button>
                        <b>{{todo.name}}</b>
                </div>

            </li>
        </ul>
    </div>
</div>

The above is working in this Fiddle:

/

However, using $destroy(), $remove(), and remove() doesn't work in later version of Angular. Any suggestions?

Very new Angular and super-confused as to how to use the $destroy method to remove an element as mentioned in the API doc here:

http://docs.angularjs/api/ng.$rootScope.Scope

Here is the HTML I tried:

<div ng-controller="TodosController">
    <div class="tasks" ng-show="todos">
        <ul ng-repeat="todo in todos">
            <li>              
                    <button ng-click="todos.$destroy(todo)">Delete</button>
                    <b>{{todo.name}}</b>                
            </li>
        </ul>
    </div>
</div>

And the JS:

var myApp = angular.module('myApp', []);

function TodosController($scope) {
    $scope.todos = [{
        name: "Learn angular",
        estimate: 8,
        done: true},
    {
        name: "Install java",
        estimate: 2,
        done: false},
    {
        name: 'Uninstall ruby',
        estimate: 3,
        done: false}];
}

Here is my fiddle for above: http://jsfiddle/5Mzda/26/

In older version of Angular, it is possible to use the $remove method to remove an element.

<script type="text/javascript" ng:autobind src="http://code.angularjs/0.9.16/angular-0.9.16.js"></script>

<div ng:controller="TodosController">
    <div class="tasks" ng:show="todos">
        <ul ng:repeat="todo in todos">
            <li>              
                <div ng:controller="TodoEditorController">
                    <button ng:click="todos.remove(todo)">Delete</button>
                        <b>{{todo.name}}</b>
                </div>

            </li>
        </ul>
    </div>
</div>

The above is working in this Fiddle:

http://jsfiddle/bpTXe/195/

However, using $destroy(), $remove(), and remove() doesn't work in later version of Angular. Any suggestions?

• javascript
• angularjs

1 Answer 1

$destroy is for destroying $scopes.

array.$remove has been removed in version 0.10.6 bubblewrap-cape (2012-01-17)

You can use array.splice:

<button ng-click="todos.splice(key,1)">Delete</button>