我遇到的问题与我的代码中的故障有关。 我必须在我的html表单中填写4个输入字段，以便在同一任务表单的html表中添加产品。我在代码中定义了一个＆＃34; Add＆＃34;仅当填写了所有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'.
}
});<!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>
有人有任何想法吗？
谢谢， 史蒂夫
答案 0 :(得分：0)
您仅在模板绘制时调用<camelContext id="cameltest001" xmlns="http://camel.apache.org/schema/spring" trace="true">
<route id="1">
<from uri="timer:test?fixedRate=true&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等