角度1.xでアイテムを追加できません

ちょうど角度を学び始めました。私はシンプルなショッピングリストアプリを作ろうとしますが、[追加]ボタンは機能しません。私がそれを押すと（ng-submit="addItem()"）何も起こらない。明らかに$scope.addItemは正しく動作しません。角度1.xでアイテムを追加できません

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; 
 
    }; 
 
}

.list{ 
 
\t width: 400px; 
 
\t margin: 0px auto; 
 
} 
 

 
.done-true { 
 
    text-decoration: line-through; 
 
    color: grey; 
 
} 
 
.done-false { 
 
    text-decoration: underline; 
 
    color: red; 
 
}

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

 
\t <div class="list"> 
 
\t \t <h2>Shopping List</h2> 
 
\t \t <div class="panel" ng-controller="ListCtrl"> 
 
\t \t <span>{{remain()}} item(s) left to buy of {{items.length}}</span> 
 
\t \t \t <table class="table table-striped"> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t \t <tr ng-repeat="item in items"> 
 
\t \t \t \t \t \t <td><input class="checkbox-inline" type="checkbox" ng-model="item.done"></td> 
 
\t \t \t \t \t \t <td><span class="done-{{item.done}}">{{item.text}}</span></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t </table> 
 
\t \t </div> 
 

 
\t \t <form ng-submit="addItem()"> 
 
\t \t \t <input class="form-control" type="text" ng-model="itemText" size="30" placeholder="Add item to list"> 
 
\t \t \t <input class="btn btn-primary" type="submit" value="Add"> 
 
\t \t </form> 
 
\t </div> 
 
</body> 
 
</html>

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

出典

2016-06-27 Archie

あなたのフォームはコントローラのdivの外にあります – Sam

@Sam、Oh ...まあ、間違いなく私は残りが必要です:)たくさんありがとう！ – Archie