2016-05-11 25 views
-2

我只想通过向它添加新元素来使用双向绑定来更新我的列表。我不明白为什么我不能做到这一点?我错过了一个重要的概念吗?为什么我的表单提交不起作用?

的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 = ''; 
    }; 
    } 
]); 
+0

你在控制台中得到了什么错误? –

+1

什么具体是不工作,什么是期望的结果? –

回答

1

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

第二<div>应该是一场势均力敌的标签</div>

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