"添加"按钮未显示在我的html任务表单中

时间:2018-06-03 15:18:09

标签: javascript html

我遇到的问题与我的代码中的故障有关。 我必须在我的html表单中填写4个输入字段,以便在同一任务表单的html表中添加产品。我在代码中定义了一个" Add"仅当填写了所有4个输入字段时,按钮

我的问题是,虽然我已填写所有这些字段,此按钮未显示由于某种原因:confused:看起来我的javascript无法正常工作。我已在外部js文件中编写了我的javascript。



var product = $scope.product = [];															// Custom JavaScript creates a JavaScript Object and binds it to the current AngularJS $scope of the form as a variable named "product".															                                                        
	$scope.addProduct = function () {														// We make a function named "addProduct".
		var product = {};																	// We add a new "product" to the Array.
		product.Category = $scope.Category;
		product.Description = $scope.Description;
		if (!!$scope.camForm.fields[0].element[0].files[0]) {
			product.Details = $scope.camForm.fields[0].element[0].files[0].name;			// We check if the file is uploaded.
		} else {
				return;																		// If the file is not uploaded, it returns "undefined".
		}
		product.Price = $scope.Price;
		$scope.product.push(product);														// We use the value of the "product" input field to add a new "product" to the Array.
		$scope.Category = "";																// We clear the TextBox "Κατηγορία".
		$scope.Description = "";															// We clear the TextBox "Περιγραφή".
		$scope.Details = "";																// We clear the TextBox "Λεπτομέρειες".
		$scope.Price = "";																	// We clear the TextBox "Τιμή (€)".
	};
	$scope.removeProduct = function (index) {												// We make a function named "removeProduct". 					
		var category = $scope.product[index].Category;										// We find product's Category using "index" from the Array and binds it to the current AngularJS $scope of the form as a variable named "category".
		$scope.product.splice(index, 1);													// We use an index to remove a "product" from the Array.
	}
	$scope.isAddFormValid = function () {													// We make a function named "isAddFormValid".
		return ($scope.Category &&
				$scope.Description &&
				$scope.camForm.fields[0].element[0].files[0] &&
				$scope.Price) ? true : false;												// If all of the 4 parameters of variable "product" are added, the value will be "true", otherwise the value will be "false".
	}
	camForm.on('form-loaded', function() {													// We hook into the lifecycle of Camunda SDK JS Form.
		camForm.variableManager.createVariable ({											// We "create" (declare) a new process variable  
				name:'product',																// named 'product' and
				type:'json',																// provide as type information 'json' used for serialization.
				value:product
			});
	});
	camForm.on('submit', function(evt) {													// We hook into the lifecycle of Camunda SDK JS Form.
		if (product.length<1) {																// If no any "product" is added,
			evt.submitPrevented = true;														// an event handler prevents the form from being submitted by setting the property "submitPrevented" to 'true'.
		}
	});
&#13;
<!DOCTYPE html>
<html lang="en">
	<head>																																
		<meta charset="UTF-8">																											
		<meta name="viewport" content="width=device-width, initial-scale=1.0">															
		<meta http-equiv="X-UA-Compatible" content="ie=edge">																			
		<title>Insert products and specifications</title> 																										
	</head>
	<body>
		<form role="form" name="insertForm" accept-charset="utf-8">
			<h2><b>Λίστα Προϊόντων</b></h2>																								<!-- We set the heading of the HTML Table. -->
			<div>													
				<table style="width:100%;">																								
					<thead>																												<!-- We group the header content in the HTML Table. -->
						<tr>																											<!-- The header content of the HTML Table is not repeated. -->																											
							<th style="width:140px;">Κατηγορία</th>
							<th style="width:600px;">Περιγραφή</th>
							<th style="width:250px;">Λεπτομέρειες</th>
							<th style="width:75px;" >Τιμή (€)</th>
							<th></th>
						</tr>
					</thead>
					<tbody ng-repeat="x in product track by $index">																	<!-- The HTML Table is populated from the JSON Array "product", using a "ng-repeat" directive which is assigned to each row of the Table in order to repeat all the objects of the Array. -->
						<tr>																											<!-- Each row of the HTML Table consists of 4 HTML Input Form fields and 1 button. -->													
							<td><input style="width:140px;" type="text" value="{{x.Category}}" /></td>						
							<td><input style="width:600px;" type="text" value="{{x.Description}}" /></td>
							<td><input style="width:250px;" type="text" value="{{x.Details}}" /></td>	
							<td><input style="width:75px;"  type="number" value="{{x.Price}}" /></td>
							<td><input type="button" ng-click="removeProduct($index)" value="Remove" /></td>							<!-- The "ng-click" directive is assigned to the "Remove" button and calls the function named "removeProduct" with the current "$index" when this button is clicked. -->
						</tr>
					</tbody>
				</table>
			</div>
			<hr>																														<!-- We separate the HTML content of the page. -->
			<div>
				<h2><b>Καταχώρησε νέο προϊόν</b></h2>																					<!-- We set the heading of the HTML Form. -->
				<div class="row">																										<!-- We set the "1st row" of the HTML Form. -->	
					<div class="col-md-6">																								<!-- We use "md" for "medium" screen devices of width equal to or greater than 992px and "6" for adding 6 columns. -->															
						<div class="form-group">																						<!-- We use "form-group" for optimum spacing. -->
							<label class="control-label" for="category">Κατηγορία</label>
							<div class="controls">
								<input style="width:140px;" id="category" type="text" ng-model="Category" />							<!-- The "ng-model" directive binds the value of the "Κατηγορία" input field to the created variable "Category" in AngularJS. -->
							</div>
						</div>
					</div>
					<div class="col-md-6">																								
						<div class="form-group">
							<label class="control-label" for="description">Περιγραφή</label>
							<div class="controls">
								<input style="width:600px;" id="description" type="text" ng-model="Description" />						<!-- The "ng-model" directive binds the value of the "Περιγραφή" input field to the created variable "Description" in AngularJS. -->	
							</div>
						</div>
					</div>
				</div>
				<div class="row">																										<!-- We set the "2nd row" of the HTML Form. -->
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label" for="details">Λεπτομέρειες</label>
							<div class="controls">
								<input style="width:250px;"
							   		   id="details"
							   		   type="file"
							   		   cam-variable-name="Details"
							           cam-variable-type="File"
							           cam-max-filesize="10000000" ng-model="Details" />												<!-- The "ng-model" directive binds the value of the "Λεπτομέρειες" input field to the created variable "Details" in AngularJS. -->
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label" for="price">Τιμή (€)</label>
							<div class="controls">
								<input style="width:75px;" id="price" type="number" min="0" ng-model="Price" />									<!-- The "ng-model" directive binds the value of the "Τιμή (€)" input field to the created variable "Price" in AngularJS. -->
							</div>
						</div>
					</div>
				</div>
				<div class="row">																										<!-- We set the "3rd row" of the HTML Form. -->
					<div class="col-md-4">																								<!-- We use "md" for medium screen devices of width equal to or greater than 992px and "4" for adding 4 columns. -->
						<div class="controls">
							<input type="button" ng-click="addProduct()" ng-show="isAddFormValid()" value="Add" />						<!-- The "ng-show" directive shows the input element ("Add" button) only if the "isAddFormValid()" expression (function) returns "true". The "ng-click" directive is assigned to the "Add" button and calls the function named "addProduct()" when this button is clicked. -->
						</div>
					</div>
				</div>
			</div>
			<script src="insert-products-and-specifications.js" charset="utf-8" cam-script type="text/form-script"></script>			<!-- We call the external script file ("insert-products-and-specifications.js"). -->
		</form>
	</body>
</html>
&#13;
&#13;
&#13;

有人有任何想法吗?

谢谢, 史蒂夫

1 个答案:

答案 0 :(得分:0)

您仅在模板绘制时调用<camelContext id="cameltest001" xmlns="http://camel.apache.org/schema/spring" trace="true"> <route id="1"> <from uri="timer:test?fixedRate=true&amp;delay=1000" id="timer"/> <to uri="mock:result" id="mockend"/> <to uri="log:test" /> </route> <route id="2"> <from uri="direct:2"/> <to uri="mock:result" id="mockend2"/> <to uri="log:test" /> </route> </camelContext> ,即在ng-show中,默认情况下所有字段都为空,因此您永远不会看到“添加”按钮。

您必须在每个输入的ng-change属性中调用isAddFormValid函数(您希望“添加”按钮显示该属性)

示例:

isAddFormValid