角度範圍內的值越來越未定義

Question

我有刪除項目的場景。 爲此，首先我得到一個具有特定條件的值列表。檢索值將在UI中用單選按鈕顯示，以選擇要刪除的特定項目。

我已經給出了單選按鈕的值作爲檢索到的項目的ID。這個id用於angularJS方法中的刪除。目前在控制器內部的角度函數中獲得未定義的值。

我的角度控制器是如下：

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子範圍內創建。你不會那scope變量外ng-repeat，就像你試圖通過它ng-click

你必須做。

1. 使用Dot rule在定義模式，使原型繼承將有助於傳遞到子範圍變量的引用。

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 

Answer 2

您的$ scope.deleteId將是未知的。你的功能應該有一個參數deleteId，改變功能

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

確保你通過標識的HTML也在裏面，

<input type="button" ng-click="deleteToDo(toDo.id)">Delete</button><br> 

編輯

由於您的刪除按鈕外部ng-repeat您應該使用點運算符ng-model爲deleteId

限定$scope變量，

$ scope.deleteItem = {};

和你的HTML作爲，

<div ng-repeat = "toDo in toDoList"> 
    <input type="radio" ng-model="deleteItem.deleteId" value="{{toDo.id}}"/> 
</div> 
<input type="button" ng-click="deleteToDo()">Delete</button><br> 

和你的控制器，

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