如何使Angular获得点击事件将DOM的一部分带入功能

Question

我正在创建一个带有Angular的小实践待办事项列表应用程序。我创建了一种用于创建新任务的表格，它们的更新正常。我为每个任务都生成了一个名为"删除"的任务。我想将按钮从TODO列表中专门删除该任务。这是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>

然后在您的控制器中：

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

顶部的文档中还有更多说明（包括可以使用的其他变量）：http：//docs.angularjs.org/api/ng.directive：ngrepeat