0
我正在通過YouTube教程上的this學習AngularJS，並且我已經用ng-submit指令在第14個視頻中創建了一個塊。無法讓這個簡單的ng-submit工作
查看下面的代碼片段，當你填寫表格底部並點擊提交它應該添加一個新的忍者，但它不工作。控制檯中沒有顯示錯誤。我在addNinja()函數定義中放置了一個debugger斷點，當點擊提交時，它不會進入它。
任何想法我做錯了什麼？
var myNinjaApp = angular.module('myNinjaApp',[]);
myNinjaApp.controller('NinjaController', ['$scope',function($scope){
\t $scope.removeNinja = function(ninja){
\t \t var removeNinja = $scope.ninjas.indexOf(ninja);
\t \t $scope.ninjas.splice(removeNinja, 1);
\t };
\t $scope.addNinja = function(){
\t \t $scope.ninjas.push({
\t \t \t name: $scope.newninja.name,
\t \t \t belt: $scope.newninja.belt,
\t \t \t rate: parseInt($scope.newninja.rate),
\t \t \t available: true
\t \t });
\t };
\t // $scope.addNinja = function() {
// $scope.ninjas.push(this.newninja);
// $scope.newninja = '';
// };
\t $scope.ninjas = [
\t {
\t \t name: "Yoshi",
\t \t belt: "green",
\t \t rate: 50,
\t \t available: true
\t },
\t {
\t \t name: "Crystal",
\t \t belt: "yellow",
\t \t rate: 30,
\t \t available: true
\t },
\t {
\t \t name: "Ryu",
\t \t belt: "orange",
\t \t rate: 10,
\t \t available: false
\t },
\t {
\t \t name: "Shaun",
\t \t belt: "black",
\t \t rate: 1000,
\t \t available: true
\t } \t \t
\t ];
}]);body{
font-family: Helvetica;
margin: 0;
}
h1,h2,h3{
margin: 0;
}
.belt{
padding: 5px 10px;
border-radius: 10px;
margin-left: 5px;
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
#menu-bar{
background: crimson;
color: #fff;
padding: 10px;
}
#menu-bar h1{
font-size: 24px;
font-weight: normal;
display: inline-block;
}
#menu-bar ul{
float: right;
list-style-type: none;
padding: 0;
margin: 6px 0;
}
#menu-bar li{
float: right;
margin-left: 20px;
}
#menu-bar a{
color: #fff
}
main{
background: #eee;
width: 80%;
margin: 30px auto;
border-radius: 10px;
}
.content{
padding: 20px;
}
.content button,
.content input[type="submit"]{
background: #fff;
padding: 10px;
border-radius: 10px;
cursor: pointer;
color: #777;
border: 0;
box-shadow: 2px 2px 2px rgba(20,20,20,0.1);
font-size: 16px;
}
.content button:nth-child(2){
float: right;
}
.content ul{
padding: 0;
list-style-type: none;
margin: 30px 0;
}
.content li{
padding: 15px 0;
border-top: 1px solid #e2e2e2;
color: #444;
}
.content li span{
float: right;
}
.content li h3{
display: inline-block;
font-weight: normal;
font-size: 22px;
}
.content input{
width: 90%;
padding: 10px 5%;
border-radius: 10px;
border: 2px solid #ddd;
margin: 10px 0;
}
.content input[type="submit"]:last-child{
width: 150px;
display: block;
margin: 15px auto;
}
.remove{
float: right;
padding: 5px;
background: #fff;
width: 18px;
text-align: center;
border-radius: 20px;
color: crimson;
cursor: pointer;
margin-left: 10px;
}<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
<head>
\t <title>TheNetNinja Angular Playlist</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
\t <div class="content">
\t \t <div ng-controller="NinjaController">
\t \t \t <button ng-click="order = 'name'">Order by Name</button>
\t \t \t <button ng-click="order = 'belt'">Order by Belt</button>
\t \t \t <input type="text" ng-model="search" placeholder="Search for a ninja">
\t \t \t <ul>
\t \t \t \t <li ng-repeat="ninja in ninjas | orderBy: order | filter: search" ng-show="ninja.available">
\t \t \t \t \t <h3>{{ninja.name}} - {{ninja.rate | currency: '£'}}</h3>
\t \t \t \t \t <div class="remove" ng-click="removeNinja(ninja)">x</div>
\t \t \t \t \t <span class="belt" style="background: {{ninja.belt}}">{{ninja.belt}} belt</span>
\t \t \t \t </li>
\t \t \t </ul>
\t \t </div>
\t \t <form ng-submit="addNinja()">
\t \t \t <input type="text" placeholder="name" ng-model="newninja.name" />
\t \t \t <input type="text" placeholder="belt" ng-model="newninja.belt" />
\t \t \t <input type="text" placeholder="rate" ng-model="newninja.rate" />
\t \t \t <input type="submit" value="Add new ninja">
\t \t </form>
\t \t <p>{{newninja}}</p>
\t </div>
</body>
</html>
非常感謝，它在'ng'控制器定義的'div'之外。 – Holly