如何使用Angular JS将数据绑定到列表？

Question

This is my HTML code It shows one text box and two buttons 'go' and 'clear completed' when i enter text in texbox and after clicking on 'go' button it should added into the unordered list.but problem is that shown in image[![enter image description here][1]][1] i am entering text as 'hhh' and something other unexpected text is coming in unordered list 这是我的HTML代码，当我在texbox中输入文本时，它显示一个文本框和两个按钮“转到”和“清除完成”，然后单击“转到”按钮后，应将其添加到无序列表中。 [！[在此处输入图片描述] [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

Answer 1

I think syntax is wrong at 2 places. 我认为语法在2个地方是错误的。 Try below 试试下面

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

Answer 2

I Changed your code. 我更改了您的代码。

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

如何使用Angular JS将数据绑定到列表？

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-09-23 10:11:13

解决方案2
0 2015-09-23 10:12:09

如何使用Angular JS将数据绑定到列表？

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-09-23 10:11:13

解决方案2 0 2015-09-23 10:12:09

解决方案1
0 已采纳 2015-09-23 10:11:13

解决方案2
0 2015-09-23 10:12:09