0

这似乎是一个新手问题......

我有一个简单的应用程序，它显示 2 个待办事项列表和一个用于在每个列表中添加新待办事项的文本输入字段。

问题 1：尝试添加新的 todo 时，控制器中未定义 $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/

4

3 回答 3

1

模型变量todoText在 ng-repeat 的范围内，并且在父范围内添加它的方法，因此您无法访问它。您可以将集合和新项目传递给 add 方法以执行添加新 TODO 的操作，如下所示

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

  };

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

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

于 2013-08-16T11:13:42.623 回答
1

问题 1todoText ：您甚至在初始化之前就尝试使用它。在警报之前声明它：

$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}
    );
};
于 2013-08-16T11:01:23.783 回答
0

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

};

于 2013-08-16T11:04:04.480 回答