Question

该代码应该在todo应用程序中打印第一个元素，即“构建Todo应用程序”。它还不包含我要添加到应用程序中的新元素。

我已按照教程进行操作，代码完全相同。我已经对其进行了多次交叉检查，但是我的应用程序仍然显示{{todo.title}}而不是“ Build Todo app”。

我的代码：

    <style>
        .done{text-decoration: line-through; color:#ccc;}
    </style>
</head>
<body>

    <div ng-controller="todoController">
        <form name="frm" ng-submit="addTodo()">
        <input type="text" name="newtodo" ng-model="newTodo" required />
        <button ng-disabled="frm.$invalid" ng-click="addtodo()">Add</button>
        </form>
        <button ng-click="clearCompleted()">Clear Completed</button>
        <ul>
                <li ng-repeat="todo in todos">
                    <input type="checkbox" ng-model="todo.done" />
                    <span ng-class="{'done':todo.done}">{{todo.title}}</span>

                </li>
        </ul>

    </div>


        <script src="bower_components/angular/angular.min.js"></script>
        <script>
            angular.module('ToDo', [])
            ToDo.controller('todoController',['$scope', function($scope){

                $scope.todos = [
                    {'title': 'Build a ToDo App', 'done': false}
                ];
                $scope.addtodo = function(){

                    $scope.todos.push({'title': $scope.newTodo , 'done': false})
                    $scope.newTodo=' '
                }
                $scope.clearCompleted = function(){
                    $scope.todos = $scope.todos.filter(function(item){
                        return !item.done
                    })
                }
            }])
        </script>

我在做什么错了？

Answer 1

因此，似乎还有其他地方的一些残余代码。我已经清除了。

let ToDo = angular.module('myApp', [])
    ToDo.controller('todoController',['$scope', function($scope){

                $scope.todos = [
                    {'title': 'Build a ToDo App', 'done': false}
                ];
                $scope.addtodo = function(){

                    $scope.todos.push({'title': $scope.newTodo , 'done': false})
                    $scope.newTodo=' '
                }
                $scope.clearCompleted = function(){
                    $scope.todos = $scope.todos.filter(function(item){
                        return !item.done
                    })
                }
            }])

          .done{text-decoration: line-through; color:#ccc;}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="todoController">
        <form name="frm" ng-submit="addTodo()">
        <input type="text" name="newtodo" ng-model="newTodo" required />
        <button ng-disabled="frm.$invalid" ng-click="addtodo()">Add</button>
        </form>
        <button ng-click="clearCompleted()">Clear Completed</button>
        <ul>
                <li ng-repeat="todo in todos">
                    <input type="checkbox" ng-model="todo.done" />
                    <span ng-class="{'done':todo.done}">{{todo.title}}</span>

                </li>
        </ul>

    </div>
</body>


</html>

怎么了？

没有ToDo变量。添加了let ToDo
控制器名称与HTML中的名称不同
该模块被命名为ToDo而不是HTML中的myApp
在正文中添加了ng-app

为什么表达式与花括号一起打印？

1 个答案: