我有这个奇怪的问题,其中只有一个模型实际上正在工作。唯一的更新模式是" 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/
拨弄
答案 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>