Question

我是AngularJS的新手 - 尝试构建一个漂亮的vanilla todo-list应用。我无法弄清楚如何将输入框中的文本值推送到＆＃39; todos＆＃39;阵列。

这是我的代码。

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 = []
  }


});

提前致谢！

Answer 1

我想这只是模板中的拼写错误，请尝试

{{todo}}

而不是

{{todo}

其他一切看起来都很好

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

我还通过$ index语句添加了跟踪以允许重复的待办事项。

Answer 2

您没有使用“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>

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 = []
 }
});

希望它有所帮助!!

Answer 3

也许你可以写这个只是为了调试它

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

帮助自己的一种方法是执行以下操作

使用大量的控制台，每个人都是新手一次，只需使用大量的直到您了解工作流程
使用局部变量，全局变量总是令人困惑，甚至是Pro。

如何将文本从html输入推送到AngularJS数组？

3 个答案: