Question

我试图在用户选中其中一个复选框时触发控制台日志。但是，我根本没有触发任何事件。

除复选框点击外，一切正常。任何提示？

（顺便说一下，这个脚本是Django和Angular JS）

 <script>

    angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var todoList = this;
    todoList.todos = [
        {% for task in tomorrow_tasks %}
 {task_id: {{ task.id | safe }},text:'{{ task.description | safe }}', assigned_to:'{{ task.assigned_to.username }}', due_date:'{{ task.due_date | safe }}', done: {{ task.complete |yesno:"true,false" }} },
        {% endfor %}];

    todoList.remaining = function() {
      var count = 0;
      angular.forEach(todoList.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };

    todoList.update_done = function () {

      console.log('sfdsf');

    };


  });

    </script>    <style>
    ul {list-style-type:none}
.done-true {
  text-decoration: line-through;
  color: grey;
}
    </style>

     {% verbatim %}

    <div ng-app="todoApp">
    <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
      <ul class="unstyled">
        <li ng-repeat="todo in todoList.todos">
          <label class="checkbox">
            <input type="checkbox" ng-model="todo.done" ng-change="update_done()">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </label>
        </li>
      </ul>

    </div>
    </div>

{% endverbatim %}

Answer 1

它应该类似于

<input type="checkbox" ng-model="todo.done" ng-change="todoList.update_done(todo)">

 todoList.update_done = function(todo){
  angular.forEach(todoList.todos,function(index,todo1){
    if(todo == todo1)
       todoList.todos[index].done = !todoList.todos[index].done;
  })
}

Answer 2

我认为，您的代码中存在错误。是：

<input type="checkbox" ng-model="todo.done" ng-change="update_done()">

但应该是：

<input type="checkbox" ng-model="todo.done" ng-change="todoList.update_done()">

请查看此示例http://jsfiddle.net/11gaj7kt/

角度复选框事件

2 个答案: