角$ scope.var未定義的控制器，但是存在於HTML

Question

這似乎是一個福利局問題...

我有簡單的應用程序，顯示待辦事項2所列出，一個文本輸入字段添加新的待辦事項每個列表。

問題1：當試圖添加新待辦事項時，控制器中未定義$ scope.todoText。

問題2：如何將新待辦事項添加到正確的列表中？

代碼：JS

function TodoCtrl($scope) { 

$scope.lists = [ 
     {name:'list1',  
     todos:[ 
      {text:'learn angular', done:true}, 
      {text:'build an angular app', done:false} 
      ]}, 
     {name:'list2',  
     todos:[ 
      {text:'buy milk', done:false}, 
      {text:'buy fruit', done:false}]} 
     ];     
    $scope.addTodo = function(listName) { 
    alert($scope.todoText); // Trying to fix this 


    // TODO add new todo to listName 

    $scope.todoText = ''; 
    }; 


} 

HTML

<div ng-app> 
    <h2>Todo</h2> 
    <div ng-controller="TodoCtrl"> 
     <ul> 
     <li ng-repeat="oneList in lists"> 
     <ul> 
     <hr/> 
     <h2>=== {{oneList.name}} ===</h2> 
     <form ng-submit="addTodo({{oneList.name}})"> 
      <input type="text" ng-model="todoText" size="30" 
       placeholder="add new todo here"> 
      <input type="submit" value="add"> 
     </form> 

     <li ng-repeat="todo in oneList.todos"> 
     <input type="checkbox" ng-model="todo.done"> 
     <span class="done-{{todo.done}}">{{todo.text}}</span> 
     </li> 

     </ul>   
     </li> 
    </ul>    
    </div> 
</div> 

的jsfiddle這裏：http://jsfiddle.net/supercobra/v8hxg/

Answer 1

模型變量todoText位於ng-repeat的範圍內，並將其添加到父範圍中，因此您無法訪問它。你可以通過收集和新項目進入add方法來進行添加一個新的TODO像這樣

$scope.addTodo = function(list,todoText) { 
     list.todos.push({text:todoText,done:false}); 

    }; 

我已經與修復更新您的提琴。

http://jsfiddle.net/cmyworld/ADJn7/2/

Answer 2

問題1：您正在嘗試偶數初始化之前使用todoText。在警報之前聲明它：

$scope.addTodo = function(listName) { 
    $scope.todoText = ''; 
    alert($scope.todoText);  
}; 

問題2：要將新的ToDo添加到正確的列表，你可以簡單地從HTML傳遞索引和新TODO：

<form ng-submit="addTodo($index, todoText)"> 

JS

$scope.addTodo = function(idx, todo) { 
    $scope.lists[idx]['todos'].push(
     {text:todo, done:false} 
    ); 
}; 

Answer 3

返回列表和文字，如Chandermai解釋，因爲範圍：

 <form ng-submit="addTodo(oneList, todoText)"> 
     <input type="text" ng-model="todoText" size="30" 
      placeholder="add new todo here"> 
     <input type="submit" value="add"> 
    </form> 

然後訪問它作爲一個對象在控制器中：

sc.addTodo = function(listName, todoText) { 
    console.log(listName.name); 
    console.log(todoText); 
// TODO add new todo to listName 

};