如何将html输入中的文本推送到AngularJS数组中

我是AngularJS新手-试图构建一个漂亮的香草待办事项列表应用程序。我不知道如何将文本值从输入框推到'todos'数组。

这是我的代码。

HTML:

  <body ng-controller="MainCtrl">
    <div class="container">
      <div class="main">
        <p>Todo App</p>
        <input ng-model="todoList" type="text" name="input" placeholder="Enter tasks here">
        <button ng-click="addTodo()">Add</button>
        <ul>
          <li ng-repeat="todo in todos">
            {{todo}
          </li>
        </ul>
      </div>
    </div>
  </body>

JS:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.todoList = "";
  $scope.addTodo = function(){
    $scope.todos.push($scope.todoList)
  }
  $scope.clearAll = function(){
    $scope.todos = []
  }

});

提前感谢!

我猜这只是你的模板打错了，试试

{{todo}}

不是

{{todo}

其他都很好

以下是完整的代码:http://plnkr.co/edit/tRGw9UTRVhXvD51lxYjF?p=preview

我还添加了track by $index语句来允许重复的待办事项

您没有使用模块"plunker"。你必须使用ng-app来包含这个模块。

更新后的工作代码为

HTML
<div class="container" data-ng-app="plunker" >
  <div class="main" data-ng-controller="MainCtrl">
    <p>Todo App</p>
    <input ng-model="todoList" type="text" name="input" placeholder="Enter tasks here">{{todoList}}
    <button ng-click="addTodo()">Add</button>
    <ul>
      <li ng-repeat="todo in todos">
        {{todo}}
      </li>
    </ul>
  </div>
</div>

var app = angular.module('plunker',[]);
app.controller('MainCtrl', function($scope) {
$scope.todos = []
$scope.todoList = "";
$scope.addTodo = function(){
  $scope.todos.push($scope.todoList)
}
$scope.clearAll = function(){
  $scope.todos = []
 }
});

希望有帮助!!

也许你可以写这个来调试一下

$scope.addTodo = function(todo) {
    // console.log(todo)
    $scope.todos.push(todo);
    // console.log($scope.todos)
}

在你的模板中，调用

<input ng-model="todo" // (not todoList)
<button ng-click="addTodo(todo)"> // (todo is local here)

帮助自己的一个方法是做下面的

使用大量的控制台，每个人都是新手，只要使用大量的控制台，直到你了解工作流程
使用局部变量，全局变量总是令人困惑，即使是专业人士。

相关内容

最新更新

热门标签：