Question

我在AngularJS中编写了一个简单的第一个应用程序，从一个todo列表的模板开始。定义的所有函数都不会绑定范围（两者都添加新任务或编辑当前一次）。我在控制器的所有范围内做的任何事情都是错误的吗？

提前致谢。

这是我的HTML：

<!DOCTYPE html>
<html>

  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.8/angular.js"></script>
    <script src="js/script.js"></script>

    <link href='//fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <div class="page-container">

     <h2>Todo</h2>

     <ul class="todo-list" ng-repeat="todo in todos track by $index">
        <li>
          <span>{{ todo }}</span>
          <button class="bt bt-achieve" ng-click="done(todo)">Done</button>
        </li>
      </ul>

    </div>

    <ul class="add-todo">
        <li>
          <input type="text" class="txt" placeholder="New Todo" ng-model="newTodo" ng-keyup="add($event)" />
        </li>
    </ul>

  </body>

</html>

我的JS脚本：

var app = angular.module('Todo', []);

app.controller('TodoCtrl', function($scope) {
  $scope.newTodo = '';

  $scope.todos = [
    'Maged Task', 
    'Essam Task',
    'Ashraf Task'
  ];

  $scope.done = function(todo) {
    var indexOf = $scope.todos.indexOf(todo);
    if (indexOf !== -1) {
      $scope.todos.splice(indexOf, 1);
    }
  };

   $scope.add = function(e) {
    if (e.which && e.which === 13) {
      $scope.todos.push($scope.newTodo);
      $scope.newTodo = '';
    }
  };
});

Answer 1

你没有绑定角度app或控制器。

尝试

<body ng-app="ToDo" ng-controller="TodoCtrl">

Answer 2

更改身体标签，如下所示

<body ng-app="Todo" ng-controller="TodoCtrl" >

我总是喜欢用ng-init方法提供初始数据。

在您的代码中，您可以使用$ scope.todos的初始数据，如下所示。

HTML代码：

<body ng-app="Todo" ng-controller="TodoCtrl" ng-init="initialData()" >

javascript代码

内部控制器

 $scope.initialData = function(){

  $scope.newTodo = '';

  $scope.todos = [
    'Maged Task', 
    'Essam Task',
    'Ashraf Task'
  ];

}

Answer 3

将<body>更改为<body ng-app="Todo" ng-controller=TodoCtrl>

简单的应用程序不会绑定到范围

3 个答案: