Angular $ scope.var在控制器中未定义，但存在于HTML中

Question

This seems to be a newb question...

I have simple app that displays 2 lists of todos and one text input field for adding new todos in each list.

Problem 1: When trying to add a new todo the $scope.todoText is undefined in the controller.

Problem 2: how to add the new todo item to the correct list?

Code: 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 here: http://jsfiddle.net/supercobra/v8hxg/

Answer 1

Problem 1 : You are trying to use todoText before even initializing it. Declare it before the alert:

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

Problem 2 : To add a new ToDo to the correct list you can simply pass the index and the new Todo from the HTML:

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

JS

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

Answer 2

The model variable todoText is within the scope of the ng-repeat and the method to add it in parent scope, so you cannot access it. You can pass the collection and the new item into the add method to perform addition of a new TODO something like this

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

  };

I have updated your fiddle with the fixes.

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

Answer 3

Return the list and the text, as Chandermai explained, because of the scope:

      <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>

Then access it as an object in your controller:

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

};