Как привязать данные к списку с помощью углового JS?

Question

Как привязать данные к списку с помощью углового JS?

0

Это мой HTML-код. Он показывает одно текстовое поле и две кнопки "go" и "clear completed" при вводе текста в texbox, и после нажатия кнопки "go" он должен быть добавлен в неупорядоченный список. Но проблема заключается в том, что показано на изображении [! [введите описание изображения здесь] [1]] [1] Я вводя текст как "hhh", и что-то другое непредвиденный текст поступает в неупорядоченный список

<html lang="en-US" ng-app="ToDo">
        <style>
            .done{ text-decoration: line-through;color: #ccc;}
        </style>
        <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">Go</button>
                </form>
                <button ng-click="clearcompleted()">Clear Completed</button>
                <ul>
                    <li ng-repeat="todo in todos track by $index">
                        <input type="checkbox" ng-model="todo.done"/>{{$index + 1}}
                        <span ng-class="{'done':todo.done}">{{todo.title}}</span>
                    </li>
                </ul>
            </div>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
            <script>
                                    var app = angular.module('ToDo', []);
                                    app.controller('todoController', function($scope){
                                    $scope.todos = JSON.parse(localStorage.getItem('todos')) || []

                                            $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;
                                    }
                                    }
                                    $scope.$watch('todos', function(newValue, oldValue)){
                                    if (newValue != oldValue){
                                    localStorage.setItem('todos', JSON.stringify(newValue))
                                    }
                                    }, true)
                                    })
            </script>
        </body>
    </html>


      [1]: http://i.stack.imgur.com/TRzbZ.png

Dhiraj 23 сен. 2015, в 12:57

Источник

0

просто увидеть ошибки в консоли браузера
Grundy 23 сен. 2015, в 10:03
0

Пожалуйста, отформатируйте ваш код правильно и убедитесь, что у вас нет синтаксических ошибок.
muenchdo 23 сен. 2015, в 10:06
0

если вместо привязки вы видите {{context}}, это означает, что в вашем угловом контроллере / угловой загрузке / и т. д. есть ошибка ... так что, как сказал Гранди, ищите ошибки в консоли.
Ziv Weissman 23 сен. 2015, в 10:09

Показать ещё 1 комментарий

Теги:

javascript

angularjs

html5

2 ответа

0

Я изменил ваш код.

var app = angular.module('ToDo', []);
                    app.controller('todoController', function($scope) {
                        $scope.todos = JSON.parse(localStorage.getItem('todos')) || []

                        $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;
                            })
                        }
                        $scope.$watch('todos', function(newValue, oldValue) {
                            if (newValue != oldValue) {
                                localStorage.setItem('todos', JSON.stringify(newValue))
                            }
                        }, true)
                    })

Anil Talla 23 сен. 2015, в 08:52

Ещё вопросы

просто увидеть ошибки в консоли браузера
Пожалуйста, отформатируйте ваш код правильно и убедитесь, что у вас нет синтаксических ошибок.
если вместо привязки вы видите {{context}}, это означает, что в вашем угловом контроллере / угловой загрузке / и т. д. есть ошибка ... так что, как сказал Гранди, ищите ошибки в консоли.

krishna · Accepted Answer · 2015-09-23T08-41-00.000Z

Я думаю, что синтаксис неверен в 2-х местах. Попробуйте ниже

<html lang="en-US" ng-app="ToDo">
    <style>
        .done{ text-decoration: line-through;color: #ccc;}
    </style>
    <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">Go</button>
            </form>
            <button ng-click="clearcompleted()">Clear Completed</button>
            <ul>
                <li ng-repeat="todo in todos track by $index">
                    <input type="checkbox" ng-model="todo.done"/>{{$index + 1}}
                    <span ng-class="{'done':todo.done}">{{todo.title}}</span>
                </li>
            </ul>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
        <script>
                                var app = angular.module('ToDo', []);
                                app.controller('todoController', function($scope){
                                $scope.todos = JSON.parse(localStorage.getItem('todos')) || []

                                $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;
                                    })
                                }
                                $scope.$watch('todos', function(newValue, oldValue){
                                    if (newValue != oldValue){
                                        localStorage.setItem('todos', JSON.stringify(newValue))
                                    }
                                }, true)
                                })
        </script>
    </body>
</html>