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"
}]
}];
var number = 5; //Starting with 5 Substances
$scope.insertSubstance = function(addsub) {
addsub.reviews = [];
$scope.gems.push(addsub);
this.sub = {};
number = number+1; //I made this so whenever user adds 1 object it changes title but wont work
if(addsub.rank == 1)
{
$scope.gems[0].rank = 6;
$scope.gems[1].rank = 5;
$scope.gems[2].rank = 4;
$scope.gems[3].rank = 3;
$scope.gems[4].rank = 2;
}
if(addsub.rank == 2)
{
$scope.gems[0].rank = 6;
$scope.gems[1].rank = 5;
$scope.gems[2].rank = 4;
$scope.gems[3].rank = 3;
}
if(addsub.rank == 3)
{
$scope.gems[0].rank = 6;
$scope.gems[1].rank = 5;
$scope.gems[2].rank = 4;
}
if(addsub.rank == 4)
{
$scope.gems[0].rank = 6;
$scope.gems[1].rank = 5;
}
if(addsub.rank == 5)
{
$scope.gems[0].rank = 6;
}
}
$("#num").append(number);
$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 <div id="num"></div> 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>Set the Rarity</option>
</select>
</div>
Image 1: <input type="file" ngf-select="" ng-model="sub.images[0]" name="image" ngf-accept="'image/*'" required="">
<i ng-show="addSubstance.images[0].$error.required">*required</i>
Image 2: <input type="file" ngf-select="" ng-model="sub.images[1]" name="image" ngf-accept="'image/*'" required="">
<i ng-show="addSubstance.images[1].$error.required">*required</i>
Image 3: <input type="file" ngf-select="" ng-model="sub.images[2]" name="image" ngf-accept="'image/*'" required="">
<i ng-show="addSubstance.images[2].$error.required">*required</i>
<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>
基本上我想要做的就是添加一个图像上传，你可以看到我对于数组中的每个对象都有3个图像。我想制作3个上传部分，并将它们推入数组，因为它已将对象推入数组但没有图像（我想我需要像我在数组中的图像文件路径）。我正在谈论的形式是addSubstance表单，我已经添加了一个上传部分，但它甚至不让我提交，我不知道为什么。我还希望每当有人添加新物质时更改标题，它会将标题从前5名更改为前6名，我评论了我在该上做了什么，但由于某种原因它不起作用。
编辑：
我修改了名称，改变它只是愚蠢和简单的错误只是改变了$（“＃num”）。append（number）; to $（“＃num”）。html（number）;并将其包含在函数addSubstance中，以便更新当前状态。
答案 0 :(得分：0)
您可以考虑使用https://github.com/danialfarid/ng-file-upload使用Angular1上传文件，
您可以上传文件并推送到一系列文件，例如：
<div ngf-drop ngf-select
ng-model="picFile" name="file"
class="drop-box"
ngf-drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}"
ngf-multiple="false" ngf-allow-dir="false"
ngf-change="addImage(picFile, images)"
ngf-accept="accept"
accept="image/*">
<span class="dropFilesText">{{ 'dropFilesText' | translate }}
</span>
</div>
在您的控制器中：
$scope.addImage = function(file, files) {
if (file) {
if ($scope.fileIndex >= ConfigurationService.getMaxNumFiles()) {
$scope.openMessageInfoModalPanel($translate.instant('upload'), $translate.instant('error.maxFilesUploadExceeded') + '5');
} else if (file.type.indexOf('image') < 0) {
$scope.openMessageInfoModalPanel($translate.instant('upload'), $translate.instant('error.nonImageFileUpload'));
} else if (file.size > ConfigurationService.getMaxFileSize()) {
$scope.openMessageInfoModalPanel($translate.instant('upload'), $translate.instant('error.maxFileSizeExceeded'));
} else if ($scope.fileReaderSupported) {
$timeout(function() {
var fileReader = new $window.FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
file.dataUrl = e.target.result;
files[$scope.fileIndex] = file;
$scope.fileIndex++;
});
};
});
}
}
};
在此处查看示例代码：
和
答案 1 :(得分：0)
<h5><b>Image Upload Instructions:</b>
<ol>
<li>-Save the images into the substance/images Folder</li>
<li>-The image must be a jpg file</li>
<li>-Name the images by a number with a prefix fot_ <br>
-Example: fot_1 would be the first image </li>
<li>In the areas below refer to the number of the image
<br>-Example: if you called an image fot_5 just input number 5 below</li>
</ol>
<div class="form-group">
<input id="img1" type="number" placeholder="Input your Image number">
</input>
</div>
<div class="form-group">
<input id="img2" type="number" placeholder="Input your Image number">
</input>
</div>
<div class="form-group">
<input id="img3" type="number" placeholder="Input your Image number">
</input>
</div>
$ scope.insertSubstance = function（addsub）{
var here1 = $("#img1").val();
var here2 = $("#img2").val();
var here3 = $("#img3").val();
var img1 = "images/fot_"+here1+".jpg";
var img2 = "images/fot_"+here2+".jpg";
var img3 = "images/fot_"+here3+".jpg";
addsub.images = [];
addsub.images[0] = img1;
addsub.images[1] = img2;
addsub.images[2] = img3;
我添加了上面的代码，因为我必须快速完成它，这基本上是我应该解决的唯一方法可能会解决，虽然我更喜欢文件上传，当用户上传图像时，它会将文件路径推送到数组，但我只是不知道如何制作它。