var app = angular.module('gemStore', []);
app.controller('StoreController', function($scope){
$scope.gems = [
{
"name": "Orthoclase Feldspar",
"description": "First synthesized in 1962, Rhenium diboride, synthetic superhard material, compared to the others on the list is a cheaper material to make as its production does not involve high pressures.",
"formula": "(ReB2)",
"rank": 5,
"hard": 72,
"rarity": 7,
"images": [
"images/rhenium.jpg",
"images/rhenium2.jpg",
"images/rhenium3.jpg"
],
"reviews": [{
"stars": 5,
"body": "I love this gem!",
"author": "joe@example.org"
}, {
"stars": 1,
"body": "This gem sucks.",
"author": "tim@example.org"
}]
}, {
"name": "Quartz",
"description": "Quartz is a chemical compound consisting of one part silicon and two parts oxygen. It is silicon dioxide (SiO2). It is the most abundant mineral found at Earth's surface, and its unique properties make it one of the most useful natural substances.",
"formula": "(SiO2)",
"rank": 4,
"hard": 100,
"rarity": 7,
"images": [
"images/quartz.jpg",
"images/quartz2.jpg",
"images/quartz3.jpg"
],
"reviews": [{
"stars": 3,
"body": "I think this gem was just OK, could honestly use more 'shine', IMO.",
"author": "JimmyDean@example.org"
}, {
"stars": 4,
"body": "Any gem with 12 'faces' is for me!",
"author": "gemsRock@example.org"
}]
}, {
"name": "Topaz",
"description": "Topaz is a silicate mineral of aluminium and fluorine with the chemical formula Al2SiO4(F,OH)2. Topaz crystallizes in the orthorhombic system, and its crystals are mostly prismatic terminated by pyramidal and other faces.",
"formula": "(Al2SiO4(OH-,F-)2)",
"rank": 3,
"hard": 200,
"rarity": 8,
"images": [
"images/topaz.jpg",
"images/topaz2.jpg",
"images/topaz3.jpg"
],
"reviews": [{
"stars": 1,
"body": "This gem is WAY too expensive for its 'rarity' value.",
"author": "turtleguyy@example.org"
}, {
"stars": 1,
"body": "BBW: High 'shine' != High Quality.",
"author": "LouisW407@example.org"
}, {
"stars": 1,
"body": "Don't waste your rubles!",
"author": "nat@example.org"
}]
}, {
"name": "Corundum",
"description": "Corundum is a rock-forming mineral that is found in igneous, metamorphic, and sedimentary rocks. It is an aluminum oxide with a chemical composition of Al2O3 and a hexagonal crystal structure.",
"formula": "(Al2O3)",
"rank": 2,
"hard": 400,
"rarity": 9,
"images": [
"images/corundum.jpg",
"images/corundum2.jpg",
"images/corundum3.jpg"
],
"reviews": [{
"stars": 1,
"body": "This gem is WAY too expensive for its 'rarity' value.",
"author": "turtleguyy@example.org"
}, {
"stars": 1,
"body": "BBW: High 'shine' != High Quality.",
"author": "LouisW407@example.org"
}, {
"stars": 1,
"body": "Don't waste your rubles!",
"author": "nat@example.org"
}]
}, {
"name": "Diamond",
"description": "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high 'shine' gem.",
"formula": "(C)",
"rank": 1,
"hard": 1500,
"rarity": 10,
"images": [
"images/diamond.png",
"images/diamond2.jpg",
"images/diamond3.png"
],
"reviews": [{
"stars": 1,
"body": "This gem is WAY too expensive for its 'rarity' value.",
"author": "turtleguyy@example.org"
}, {
"stars": 1,
"body": "BBW: High 'shine' != High Quality.",
"author": "LouisW407@example.org"
}, {
"stars": 1,
"body": "Don't waste your rubles!",
"author": "nat@example.org"
}]
}];
$scope.addSubstance = function(addsub) {
gem.push(addsub);
this.sub = {};
}
$scope.addReview = function (stone) {
this.gem.reviews.push(stone);
this.rev = {};
}
});
app.controller('TabController', function($scope){
$scope.tab = 1;
$scope.setTab = function(newValue){
$scope.tab = newValue;
};
$scope.isSet = function(tabNumber){
return $scope.tab === tabNumber;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hardest Substances</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/gemstore.css" rel="stylesheet">
</head>
<body ng-app="gemStore" class="list-group" ng-controller="StoreController">
<div class="container">
<header>
<h1 class="text-center">Top 5 Hardest Substances on Earth</h1>
</header>
<div class="list-group-item" ng-repeat="gem in gems | orderBy:'-rank'" >
<h3>
{{gem.name}}
<em class="pull-right">{{gem.rank}}</em>
</h3>
<div ng-show="gem.images.length">
<ul class="list-inline thumbs">
<li class="small-image thumbnail"
ng-repeat="image in gem.images" >
<img ng-src="{{image}}" >
</li>
</ul>
</div>
<section ng-controller="TabController">
<ul class="nav nav-pills">
<li ng-class="{active:isSet(1)}"> <a href ng-click="setTab(1)">Description</a> </li>
<li ng-class="{active:isSet(2)}"> <a href ng-click="setTab(2)">Specs</a> </li>
<li ng-class="{active:isSet(3)}"> <a href ng-click="setTab(3)">Opinions</a> </li>
</ul>
<div ng-show="isSet(1)">
<h4>Description</h4>
<blockquote> {{gem.description}}</blockquote>
</div>
<div ng-show="isSet(2)">
<h4>Specs</h4>
<blockquote>
<ul class="list-unstyled">
<li><strong>Chemical Formula</strong>: {{gem.formula}}</li>
<li><strong>Rarity</strong>: {{gem.rarity}}</li>
<li><strong>Absolute Hardness: </strong>{{gem.hard}} </li>
</ul>
</blockquote>
</div>
<div ng-show="isSet(3)">
<h4>Reviews</h4>
<ul>
<li class="list-unstyled" ng-repeat = "review in gem.reviews">
<blockquote>
<strong>{{review.stars}} Stars</strong>
{{review.body}}
<br><cite>-{{review.author}}</cite>
</blockquote>
</li>
</ul>
<form name="reviewForm" ng-submit="addReview(rev)">
<blockquote >
<strong>{{rev.stars}} Stars</strong>
{{rev.body}}
<br><cite>─{{rev.author}}</cite>
</blockquote>
<fieldset>
<legend>Submit a Review</legend>
<div class="form-group">
<div class=custom-error ng-show="reviewForm.stars.$error.required">**</div>
<select ng-model="rev.stars" class="form-control" name="stars" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required >
<option value>Rate the Product</option>
</select>
</div>
<div class="form-group">
<div class=custom-error ng-show="reviewForm.body.$error.required">**</div>
<textarea ng-model="rev.body" name = "body" class="form-control" placeholder="Write a short review of the product..." title="Review" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="reviewForm.body.$error.pattern">Body doesn't respect the pattern.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="reviewForm.author.$error.required">**</div>
<input ng-model="rev.author" type="email" name = "author" class="form-control" placeholder="jimmyDean@example.org" title="Email" ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>
<div class="custom-error" ng-show="reviewForm.author.$error.pattern">Email Address doesn't respect the pattern.
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-disabled="reviewForm.$invalid" value="Submit Review" >
</div>
</fieldset>
</form>
</div>
</section>
</div>
<button onclick="substanceForm()" class="btn btn-blue">Add Substance</button>
<form name="addSubstance" ng-submit="addSubstance(sub)">
<fieldset>
<legend>Add a Substance</legend>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.rank.$error.required">**</div>
<select ng-model="sub.rank" class="form-control" name="rank" ng-options="rank for rank in [10,9,8,7,6,5,4,3,2,1]" title="Rank" required >
<option value>Rank the Substance</option>
</select>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.name.$error.required">**</div>
<textarea ng-model="sub.name" name = "Name" class="form-control" placeholder="Write the Name of the Substance...." title="Name" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="addSubstance.name.$error.pattern">Invalid Name.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.description.$error.required">**</div>
<textarea ng-model="sub.description" name = "Description" class="form-control" placeholder="Write the Description of the Substance..." title="Description" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="addSubstance.description.$error.pattern">Invalid Description.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.formula.$error.required">**</div>
<textarea ng-model="sub.formula" name = "Formula" class="form-control" placeholder="Write the Formula..." title="Formula" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="addSubstance.formula.$error.pattern">Invalid Formula.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.rarity.$error.required">**</div>
<select ng-model="sub.rarity" class="form-control" name="rarity" ng-options="rarity for rarity in [10,9,8,7,6,5,4,3,2,1]" title="Rarity" required >
<option value>Rank the Substance</option>
</select>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.hard.$error.required">**</div>
<textarea ng-model="sub.hard" name = "Absolute" class="form-control" placeholder="Write the Absolute Hardness Value" title="Absolute" ng-pattern="/^[0-9]*$/" required></textarea>
<div class="custom-error" ng-show="addSubstance.hard.$error.pattern">Numbers Only.
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-disabled="addSubstance.$invalid" value="Submit Substance" >
</div>
</fieldset>
</form>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
这基本上就是我现在拥有的代码，正如你在HTML结尾处所看到的，我有一个表单来添加另一种物质，当我尝试提交它时，它不会工作，我尝试了几种不同的东西。我希望你们能帮助我，谢谢！ :)哦，我想在表格中包含图像，如果有人知道如何。基本上我希望表单包含数组中的所有内容并添加它，以便它根据排名显示页面和地方的所有内容。我遇到问题的形式是addSubstance表单。我怀疑是addSubstance函数和提交按钮。
答案 0 :(得分：1)
你有3个问题：
由表单的name属性创建的FormController与提交函数的名称相同：addSubstance。 解决方案更改其中一个。我将提交函数更改为控制器中的insertSubstance以及ngSubmit指令内部。
函数本身 - 它试图将物质对象推送到未定义的变量。但实际上它应该将其推送到$scope.gems数组，以便在添加它时它将显示在视图中。
您将无法为新添加的物质添加评论，因为它没有reviews数组（当您从视图中调用$scope.addReview 时< /强>）。 解决方案 - 在之前添加评论数组，如下所示：addsub.reviews = [];（addsub是传递给函数的对象。）
这是最后一项功能：
// Change the name of the function so it won't be the same as the FormController object
$scope.insertSubstance = function(addsub) {
addsub.reviews = []; // Predefine the "reviews" array so it won't be undefined when you need to add a review to this substance
$scope.gems.push(addsub); // Not "gem.push"
this.sub = {}; // This is just fine :)
}
我还将ng-submit="addSubstance(sub)"更改为ng-submit="insertSubstance(sub)"。
请注意，您在评论＆＃34; ohh中写道并且没有var gem，我在gems中创建了ngrepeat = gem＆＃34; - 这不起作用，因为表单元素是< strong>外部 ngRepeat指令循环，因此它不知道谁gem - 它只在ngRepeat循环内可用（＆##} 39;为什么它可以用来添加评论 - this.gem - 它在函数的同一范围内。）
这是一个有效的解决方案：
var app = angular.module('gemStore', []);
app.controller('StoreController', function($scope){
$scope.gems = [
{
"name": "Orthoclase Feldspar",
"description": "First synthesized in 1962, Rhenium diboride, synthetic superhard material, compared to the others on the list is a cheaper material to make as its production does not involve high pressures.",
"formula": "(ReB2)",
"rank": 5,
"hard": 72,
"rarity": 7,
"images": [
"images/rhenium.jpg",
"images/rhenium2.jpg",
"images/rhenium3.jpg"
],
"reviews": [{
"stars": 5,
"body": "I love this gem!",
"author": "joe@example.org"
}, {
"stars": 1,
"body": "This gem sucks.",
"author": "tim@example.org"
}]
}, {
"name": "Quartz",
"description": "Quartz is a chemical compound consisting of one part silicon and two parts oxygen. It is silicon dioxide (SiO2). It is the most abundant mineral found at Earth's surface, and its unique properties make it one of the most useful natural substances.",
"formula": "(SiO2)",
"rank": 4,
"hard": 100,
"rarity": 7,
"images": [
"images/quartz.jpg",
"images/quartz2.jpg",
"images/quartz3.jpg"
],
"reviews": [{
"stars": 3,
"body": "I think this gem was just OK, could honestly use more 'shine', IMO.",
"author": "JimmyDean@example.org"
}, {
"stars": 4,
"body": "Any gem with 12 'faces' is for me!",
"author": "gemsRock@example.org"
}]
}, {
"name": "Topaz",
"description": "Topaz is a silicate mineral of aluminium and fluorine with the chemical formula Al2SiO4(F,OH)2. Topaz crystallizes in the orthorhombic system, and its crystals are mostly prismatic terminated by pyramidal and other faces.",
"formula": "(Al2SiO4(OH-,F-)2)",
"rank": 3,
"hard": 200,
"rarity": 8,
"images": [
"images/topaz.jpg",
"images/topaz2.jpg",
"images/topaz3.jpg"
],
"reviews": [{
"stars": 1,
"body": "This gem is WAY too expensive for its 'rarity' value.",
"author": "turtleguyy@example.org"
}, {
"stars": 1,
"body": "BBW: High 'shine' != High Quality.",
"author": "LouisW407@example.org"
}, {
"stars": 1,
"body": "Don't waste your rubles!",
"author": "nat@example.org"
}]
}, {
"name": "Corundum",
"description": "Corundum is a rock-forming mineral that is found in igneous, metamorphic, and sedimentary rocks. It is an aluminum oxide with a chemical composition of Al2O3 and a hexagonal crystal structure.",
"formula": "(Al2O3)",
"rank": 2,
"hard": 400,
"rarity": 9,
"images": [
"images/corundum.jpg",
"images/corundum2.jpg",
"images/corundum3.jpg"
],
"reviews": [{
"stars": 1,
"body": "This gem is WAY too expensive for its 'rarity' value.",
"author": "turtleguyy@example.org"
}, {
"stars": 1,
"body": "BBW: High 'shine' != High Quality.",
"author": "LouisW407@example.org"
}, {
"stars": 1,
"body": "Don't waste your rubles!",
"author": "nat@example.org"
}]
}, {
"name": "Diamond",
"description": "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high 'shine' gem.",
"formula": "(C)",
"rank": 1,
"hard": 1500,
"rarity": 10,
"images": [
"images/diamond.png",
"images/diamond2.jpg",
"images/diamond3.png"
],
"reviews": [{
"stars": 1,
"body": "This gem is WAY too expensive for its 'rarity' value.",
"author": "turtleguyy@example.org"
}, {
"stars": 1,
"body": "BBW: High 'shine' != High Quality.",
"author": "LouisW407@example.org"
}, {
"stars": 1,
"body": "Don't waste your rubles!",
"author": "nat@example.org"
}]
}];
$scope.insertSubstance = function(addsub) {
addsub.reviews = [];
$scope.gems.push(addsub);
this.sub = {};
}
$scope.addReview = function (stone) {
this.gem.reviews.push(stone);
this.rev = {};
}
});
app.controller('TabController', function($scope){
$scope.tab = 1;
$scope.setTab = function(newValue){
$scope.tab = newValue;
};
$scope.isSet = function(tabNumber){
return $scope.tab === tabNumber;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hardest Substances</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/gemstore.css" rel="stylesheet">
</head>
<body ng-app="gemStore" class="list-group" ng-controller="StoreController">
<div class="container">
<header>
<h1 class="text-center">Top 5 Hardest Substances on Earth</h1>
</header>
<div class="list-group-item" ng-repeat="gem in gems | orderBy:'-rank'" >
<h3>
{{gem.name}}
<em class="pull-right">{{gem.rank}}</em>
</h3>
<div ng-show="gem.images.length">
<ul class="list-inline thumbs">
<li class="small-image thumbnail"
ng-repeat="image in gem.images" >
<img ng-src="{{image}}" >
</li>
</ul>
</div>
<section ng-controller="TabController">
<ul class="nav nav-pills">
<li ng-class="{active:isSet(1)}"> <a href ng-click="setTab(1)">Description</a> </li>
<li ng-class="{active:isSet(2)}"> <a href ng-click="setTab(2)">Specs</a> </li>
<li ng-class="{active:isSet(3)}"> <a href ng-click="setTab(3)">Opinions</a> </li>
</ul>
<div ng-show="isSet(1)">
<h4>Description</h4>
<blockquote> {{gem.description}}</blockquote>
</div>
<div ng-show="isSet(2)">
<h4>Specs</h4>
<blockquote>
<ul class="list-unstyled">
<li><strong>Chemical Formula</strong>: {{gem.formula}}</li>
<li><strong>Rarity</strong>: {{gem.rarity}}</li>
<li><strong>Absolute Hardness: </strong>{{gem.hard}} </li>
</ul>
</blockquote>
</div>
<div ng-show="isSet(3)">
<h4>Reviews</h4>
<ul>
<li class="list-unstyled" ng-repeat = "review in gem.reviews">
<blockquote>
<strong>{{review.stars}} Stars</strong>
{{review.body}}
<br><cite>-{{review.author}}</cite>
</blockquote>
</li>
</ul>
<form name="reviewForm" ng-submit="addReview(rev)">
<blockquote >
<strong>{{rev.stars}} Stars</strong>
{{rev.body}}
<br><cite>─{{rev.author}}</cite>
</blockquote>
<fieldset>
<legend>Submit a Review</legend>
<div class="form-group">
<div class=custom-error ng-show="reviewForm.stars.$error.required">**</div>
<select ng-model="rev.stars" class="form-control" name="stars" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required >
<option value>Rate the Product</option>
</select>
</div>
<div class="form-group">
<div class=custom-error ng-show="reviewForm.body.$error.required">**</div>
<textarea ng-model="rev.body" name = "body" class="form-control" placeholder="Write a short review of the product..." title="Review" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="reviewForm.body.$error.pattern">Body doesn't respect the pattern.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="reviewForm.author.$error.required">**</div>
<input ng-model="rev.author" type="email" name = "author" class="form-control" placeholder="jimmyDean@example.org" title="Email" ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>
<div class="custom-error" ng-show="reviewForm.author.$error.pattern">Email Address doesn't respect the pattern.
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-disabled="reviewForm.$invalid" value="Submit Review" >
</div>
</fieldset>
</form>
</div>
</section>
</div>
<button onclick="substanceForm()" class="btn btn-blue">Add Substance</button>
<form name="addSubstance" ng-submit="insertSubstance(sub)">
<fieldset>
<legend>Add a Substance</legend>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.rank.$error.required">**</div>
<select ng-model="sub.rank" class="form-control" name="rank" ng-options="rank for rank in [10,9,8,7,6,5,4,3,2,1]" title="Rank" required >
<option value>Rank the Substance</option>
</select>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.name.$error.required">**</div>
<textarea ng-model="sub.name" name = "Name" class="form-control" placeholder="Write the Name of the Substance...." title="Name" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="addSubstance.name.$error.pattern">Invalid Name.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.description.$error.required">**</div>
<textarea ng-model="sub.description" name = "Description" class="form-control" placeholder="Write the Description of the Substance..." title="Description" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="addSubstance.description.$error.pattern">Invalid Description.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.formula.$error.required">**</div>
<textarea ng-model="sub.formula" name = "Formula" class="form-control" placeholder="Write the Formula..." title="Formula" ng-pattern="/.{5,}/" required></textarea>
<div class="custom-error" ng-show="addSubstance.formula.$error.pattern">Invalid Formula.
</div>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.rarity.$error.required">**</div>
<select ng-model="sub.rarity" class="form-control" name="rarity" ng-options="rarity for rarity in [10,9,8,7,6,5,4,3,2,1]" title="Rarity" required >
<option value>Rank the Substance</option>
</select>
</div>
<div class="form-group">
<div class=custom-error ng-show="addSubstance.hard.$error.required">**</div>
<textarea ng-model="sub.hard" name = "Absolute" class="form-control" placeholder="Write the Absolute Hardness Value" title="Absolute" ng-pattern="/^[0-9]*$/" required></textarea>
<div class="custom-error" ng-show="addSubstance.hard.$error.pattern">Numbers Only.
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-disabled="addSubstance.$invalid" value="Submit Substance" >
</div>
</fieldset>
</form>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>