Question

我只是想使用双向绑定来通过向其添加新元素来更新我的列表。我不明白为什么我不能这样做？我错过了一个重要的概念吗？

的index.html

<!DOCTYPE html>
<html>
<head>
  <title>NgRailsTodoList</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="todoApp" ng-controller="MainCtrl">

  <div class="container">
    <div class="content-container clearfix">
      <div class="col-md-12">
        <h1 class="content-title text-center">Todo</h1>
        <div ng-repeat="list in lists">
          <h3>{{list.name}}</h3>
          <div ng-repeat="task in list.tasks">
            <h5><input type="checkbox" ng-checked="task.completed">{{ task.body }}</h5>
          </div>
        <div>
      </div>
      <form ng-submit="addList()">
        <input type="text" ng-model="name"></input>
        <button type="submit"> New List </button>
      </form>
    </div>
  </div>

</body>
</html>

app.js

angular.module('todoApp', ['ui.router', 'templates'])
.factory('lists',[ function () {
  var o = { lists: [{ name: "groceries", completed: false,
                    tasks: [{body: "buy fish",completed: true},
                            {body: "buy sushi",completed: false},
                            {body: "buy bread",completed: true}]}]
          };
  return o;
}])
.controller('MainCtrl', [
  '$scope','lists',
   function($scope,lists){
     console.log(lists);
     $scope.lists = lists.lists;
     $scope.addList = function(){
       $scope.lists.push({name: $scope.name, completed: false})
       // console.log(this.name);
       // $scope.name = '';
     };
   }
 ]);

Answer 1

问题在于标记。
<h5><input type="checkbox" ng-checked="task.completed">{{ task.body }}</h5> </div> <div> </div>

第二个<div>应为关闭代码</div>

这是一个工作示例http://codepen.io/mkl/pen/KzEmwP

为什么我的表单提交不起作用？

1 个答案: