angularjs - 如何让 Angular 让点击事件将部分 dom 带到函数中？

Question

我正在使用 Angular 创建一个小型练习待办事项列表应用程序。我已经创建了一个用于创建新任务的表单，并且它们正在更新。我为每个名为“删除”的任务生成一个按钮。我想让按钮从待办事项列表中专门删除该任务。这是 html 代码:

<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 代码:

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) {
};

任何建议都很好，谢谢。

Answer 1

您可以在使用 ng-repeat 时访问一个名为 $index 的变量，因此您可以执行如下操作:

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

然后在你的 Controller 中:

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

顶部的文档中提供了更多描述(包括您可以使用的其他变量):http://docs.angularjs.org/api/ng.directive:ngRepeat