javascript - Angular 范围内的值变得不确定

Question

我有一个删除项目的场景。为此，首先我得到一个具有特定条件的值列表。检索到的值将显示在 UI 中，并带有单选按钮以选择要删除的特定项目。

我已将单选按钮的值指定为检索到的项目的 ID。这个 id 在 angularJS 方法中用于删除。当前在 Controller 内的 Angular 函数中获取未定义的值。

我的 Angular Controller 如下:

mainApp.controller("deleteToDoController", function($scope,$http) {
$scope.toDoList = {};
$scope.getToDo = function(){
    var url = "http://localhost:8080/webservice-4.0/rest/todo/"+$scope.status;
    $http.get(url)
    .then(function(response) {
        $scope.toDoList = angular.fromJson(response.data);
    });
}
$scope.deleteToDo = function(){
    var url = "http://localhost:8080/webservice-4.0/rest/todo/delete/"+$scope.deleteId;
    $http.get(url)
    .then(function(response) {
        $scope.toDoList = angular.fromJson(response.data);
    });
}

});

我的 html 页面代码是:

<div ng-controller="deleteToDoController">
<form ng-submit="getToDo()">
    ToDo Status:
    <input type="radio" ng-model="status" value="completed"/>Completed<input type="radio" ng-model="status" value="pending"/>Not Completed
    <input type="submit" value="View To Do"/><br>
    <div ng-repeat = "toDo in toDoList">
        <input type="radio" ng-model="deleteId" value="{{toDo.id}}"/>Task : {{toDo.name}}<br>
    </div>
    <input type="button" ng-click="deleteToDo()">Delete</button><br>
</form>

感谢!!!!

Answer 1

因为 deletedId 是在 ng-repeat 子范围内创建的。你不会在 ng-repeat 之外的那个 scope 变量，就像你试图在 ng-click

中传递它一样

您必须执行以下操作。

1. 在定义模型时使用点规则，这样原型(prototype)继承将有助于将变量的引用传递给子作用域。

2. 使用 ControllerAs 模式。

HTML

<form ng-submit="getToDo()">
    ToDo Status:
    <input type="radio" ng-model="status" value="completed"/>Completed<input type="radio" ng-model="status" value="pending"/>Not Completed
    <input type="submit" value="View To Do"/><br>
    <div ng-repeat = "toDo in toDoList">
        <input type="radio" ng-model="tobeDeleted.deleteId" 
           value="{{toDo.id}}"/>
        Task : {{toDo.name}}<br>
    </div>
    <input type="button" ng-click="deleteToDo()">Delete</button><br>
</form>

使用点规则

//define model
$scope.tobeDeleted = {}; //then place deleted property here
//you could easily access `$scope.tobeDeleted.deletedId` inside a controller