只有一个模特在工作?

时间:2018-02-10 10:39:36

标签: javascript html angularjs

我有这个奇怪的问题,其中只有一个模型实际上正在工作。唯一的更新模式是" toDo"因为它在表单下面重复,但是"点击"也不 " addToDo"正在更新或被点击:

使用mvc

<head>
<title>ToDo</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/Controllers/ToDoController.js"></script>
 </head>


<div class="container">
<div ng-app="myApp" ng-controll="myCtrl">
    <form>
        <div class="form-group">
            <label for="toDoItem">To Do</label>
            <input type="text" class="form-control" id="toDoItem" placeholder="Enter your To-Do" ng-model="toDo"/>
            <button type="button" class="btn btn-default" ng-click="addToDo()">Add To Do</button>
        </div>
    </form>
    <p>ToDo: {{toDo}}</p>
    <p>Clicked: {{clicked}} </p>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl',
    function($scope) {
        $scope.toDo = "";
        $scope.clicked = false;
        $scope.toDoArray = {};

        $scope.addToDo = function() {
            scope.toDoArray.push($scope.toDo);
            $scope.clicked = true;
            alert("To Do Added");
        }
    });

https://jsfiddle.net/npq5kc3h/

拨弄

1 个答案:

答案 0 :(得分:1)

您有一些问题

HTML中有拼写错误:

<div ng-app="myApp" ng-controll="myCtrl">
                              ^

您没有使用正确的$scope变量

scope.toDoArray.push($scope.toDo);
^

您的模型toDoArray必须初始化为数组

$scope.toDoArray = {}; 
                   ^

<强>段

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.toDo = "";
  $scope.clicked = false;
  $scope.toDoArray = [];

  $scope.addToDo = function() {
    $scope.toDoArray.push($scope.toDo);
    $scope.clicked = true;
    alert("To Do Added");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container">
  <div ng-app="myApp" ng-controller="myCtrl">
    <form>
      <div class="form-group">
        <label for="toDoItem">To Do</label>
        <input type="text" class="form-control" id="toDoItem" placeholder="Enter your To-Do" ng-model="toDo" />
        <button type="button" class="btn btn-default" ng-click="addToDo()">Add To Do</button>
      </div>
    </form>
    <p>ToDo: {{toDo}}</p>
    <p>Clicked: {{clicked}} </p>

  </div>