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

【问题标题】：Why does the expression get printed along with the curly braces?为什么表达式与花括号一起打印？
【发布时间】：2019-07-10 04:43:19
【问题描述】：

代码应该打印待办事项应用程序中的第一个元素，即“构建待办事项应用程序”。它也不包括我添加到应用程序中的新元素。

我按照教程进行的，代码完全一样。我已经交叉检查了很多次，但我的应用仍然显示 {{todo.title}} 而不是“构建 Todo 应用”

我的代码：

    <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>

我做错了什么？

【问题讨论】：

您能在 Plunkr 或其他地方分享此代码吗？
也许您甚至没有通过提及 ng-app 来启动代码。这只有在您添加完整代码供我们调试时才会清楚。

标签： javascript html css angularjs

【解决方案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

【讨论】：