Почему выражение печатается вместе с фигурными скобками? - PullRequest
Новая
       6

Почему выражение печатается вместе с фигурными скобками?

0 голосов
/ 09 июля 2019

Код должен печатать первый элемент в приложении todo, который называется «Build a Todo App».Он также не включает новые элементы, которые я добавляю в приложение.

Я поступил в соответствии с руководством, и код точно такой же.Я проверял это много раз, но мое приложение по-прежнему отображает {{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>

Что я делаю не так?

1 Ответ

0 голосов
/ 09 июля 2019

Итак, похоже, был какой-то остаточный код откуда-то еще.Я все выяснил. 

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 вместо myApp, как в HTML
  • Добавлено ng-app втело
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...