Question

刚开始学习Angular。我尝试制作一个简单的购物清单应用，但是“添加”＃39;按钮不起作用。当我按下它时（ng-submit="addItem()"）没有任何反应。显然$scope.addItem无法正常工作。

＆＃13;

var myModule = angular.module('list', []);
myModule.controller('ListCtrl', ListCtrl);

function ListCtrl($scope) {
    $scope.items = [
      { text: 'Chocolate', done: true },
      { text: 'Potato', done: false },
      { text: 'Banana', done: false },
      { text: 'Water', done: true }
    ];
 
    $scope.addItem = function () {

        $scope.items.push({ text: $scope.itemText, done: false });
        $scope.itemText = '';
    };

    $scope.remain = function () {
        var count = $scope.items.length;

        angular.forEach($scope.items, function(item) {
            count -= item.done;
        });
        return count;
    };
}

＆＃13;

.list{
	width: 400px;
	margin: 0px auto;
}

.done-true {
  text-decoration: line-through;
  color: grey;
}
.done-false {
  text-decoration: underline;
  color: red;
}

＆＃13;

<html lang="en" ng-app="list">
<head>
  <title>Document 1</title>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="app.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>

	<div class="list">
		<h2>Shopping List</h2>
		<div class="panel" ng-controller="ListCtrl">
		<span>{{remain()}} item(s) left to buy of {{items.length}}</span>
			<table class="table table-striped">
				<tbody>
					<tr ng-repeat="item in items">
						<td><input class="checkbox-inline" type="checkbox" ng-model="item.done"></td>
						<td><span class="done-{{item.done}}">{{item.text}}</span></td>
					</tr>
				</tbody>
			</table>
		</div>

		<form ng-submit="addItem()">
			<input class="form-control" type="text" ng-model="itemText" size="30" placeholder="Add item to list">
			<input class="btn btn-primary" type="submit" value="Add">
		</form>
	</div>
</body>
</html>

＆＃13;

http://codepen.io/ArkadiyS/pen/BzWjvX

Answer 1

检查您的代码并确保<form>位于<div class="panel" ng-controller="ListCtrl">。

内

无法通过Angular 1.x

1 个答案: