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

问题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 2

模型变量todoText在ng-repeat的范围内，以及将其添加到父范围内的方法，因此您无法访问它。您可以将集合和新项目传递到add方法，以执行添加类似此项的新TODO

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

  };

我已经修复了你的小提琴。

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

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

};

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

3 个答案: