Question

我在YouTube教程上通过this学习AngularJS，并且我使用ng-submit指令在第14个视频上遇到了障碍。

请参阅下面的代码片段，当您填写底部的表单并点击提交时，它应该添加一个新的 Ninja ，但它无效。控制台中没有显示错误。我在debugger函数定义中放置了一个addNinja()断点，当我点击提交时它没有进入它。

知道我做错了吗？

＆＃13;

var myNinjaApp = angular.module('myNinjaApp',[]);

myNinjaApp.controller('NinjaController', ['$scope',function($scope){
	$scope.removeNinja = function(ninja){
		var  removeNinja = $scope.ninjas.indexOf(ninja);
		$scope.ninjas.splice(removeNinja, 1);
	};

	$scope.addNinja = function(){
		$scope.ninjas.push({
			name: $scope.newninja.name,
			belt: $scope.newninja.belt,
			rate: parseInt($scope.newninja.rate),
			available: true
		});
	};

	// $scope.addNinja = function() {
 //        $scope.ninjas.push(this.newninja);
 //        $scope.newninja = '';
 //    };

	$scope.ninjas = [
	{
		name: "Yoshi",
		belt: "green",
		rate: 50,
		available: true
	},
	{
		name: "Crystal",
		belt: "yellow",
		rate: 30,
		available: true
	},
	{
		name: "Ryu",
		belt: "orange",
		rate: 10,
		available: false
	},
	{
		name: "Shaun",
		belt: "black",
		rate: 1000,
		available: true
	}		
	];
}]);

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
<head>
	<title>TheNetNinja Angular Playlist</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
	<div class="content">
		<div ng-controller="NinjaController">
			<button ng-click="order = 'name'">Order by Name</button>
			<button ng-click="order = 'belt'">Order by Belt</button>
			<input type="text" ng-model="search" placeholder="Search for a ninja">
			<ul>
				<li ng-repeat="ninja in ninjas | orderBy: order | filter: search" ng-show="ninja.available">
					<h3>{{ninja.name}} - {{ninja.rate | currency: '£'}}</h3>
					<div class="remove" ng-click="removeNinja(ninja)">x</div>
					<span class="belt" style="background: {{ninja.belt}}">{{ninja.belt}} belt</span>
				</li>
			</ul>
		</div>
		<form ng-submit="addNinja()">
			<input type="text" placeholder="name" ng-model="newninja.name" />
			<input type="text" placeholder="belt" ng-model="newninja.belt" />
			<input type="text" placeholder="rate" ng-model="newninja.rate" />
			<input type="submit" value="Add new ninja">
		</form>
		<p>{{newninja}}</p>
	</div>
</body>
</html>

＆＃13;

Answer 1

myNinjaApp.controller（'NinjaController'，['$ scope'，'$ http'，'$ log'，函数（$ scope，$ http，$ log）{

$http({
    url: "data/ninjas.json",
    method: "GET"
}).then(function (resp) {
    //$log.log(resp.data);
    $scope.ninjas = resp;
}, function (resp) {
    $log.error("ERROR Occurred");
    //debugger;
});

$scope.removeNinja = function (ninja) {
    var removeNinja = $scope.ninjas.indexOf(ninja);
    $scope.ninjas.splice(removeNinja, 1);
}

$scope.addNinja = function () {
    $scope.ninjas.push({
        name: $scope.newninja.name,
        belt: $scope.newninja.belt,
        rate: parseInt($scope.newninja.rate),
        available: true
    });
    $scope.newninja.name = "";
    $scope.newninja.belt = "";
    $scope.newninja.rate = "";
};

$scope.removeAll = function () {
    $scope.ninjas = [];
};

$scope.sort = function (keyname) {
    $scope.sortKey = keyname; 
    $scope.reverse = !$scope.reverse;
}

}]）;

无法让这个简单的ng-submit工作

1 个答案: