How to get Angular to have a click event bring part of the dom with it to the function?

Question

How to get Angular to have a click event bring part of the dom with it to the function?

I am creating a small practice to-do list app with Angular. I have created a form for creating new tasks and they are updating fine. I have a button generate for every task that is titled "remove". I'd like to make the button remove specifically that task from the todo list. Here's the html code:

<div ng-controller="todoListController">
    <ul>
        <li ng-repeat="task in taskList">
            <p>
                {{task.name}}: {{task.description}}
                <button ng-click="killtodo()"> Remove </button>
            </p>
        </li>
        <hr>
        <h3> Display: </h3>
        <li>
            <p>
                {{task}}: {{taskDescription}}
            <p>
        </li>
    </ul>
    <hr>
    <form ng-submit="addto()">
        <input type="text" ng-model="task" placeholder="Enter a task name.">
        <input type="text" ng-model="taskDescription" placeholder="Enter the description.">
        <input class="btn-primary" type="submit" value="add">
    </form>
</div>

Javascript code:

function todoListController($scope) {
$scope.taskList = [
{"name": "Task List",
 "description": "Make a Task List."}
];

$scope.addto = function() {
    $scope.taskList.push({name:$scope.task, description:$scope.taskDescription});
    $scope.task = '';
    $scope.taskDescription = '';
};

$scope.killtodo = function(name) {
};

}

Any suggestions would be great, thanks.

angularjs

Answer 1

You have access to a variable called $index while using an ng-repeat so you can do something like this:

<li ng-repeat="task in taskList">
    <p>
        {{task.name}}: {{task.description}}
        <button ng-click="killtodo($index)"> Remove </button>
    </p>
</li>

And then in your controller:

function todoListController($scope) {
    //other code
    $scope.killtodo = function($index){
        $scope.taskList.splice($index, 1);
    }
}

There's more description available in the docs at the top (including other variables you can use): http://docs.angularjs.org/api/ng.directive:ngRepeat