我有一个下拉列表，当用户从下拉列表中选择任何选项时，每个选择都会出现一个文本框。
HTML-
<select id="nut">
<option>---select---</option>
<option value="N1">N1</option>
<option value="N2">N2</option>
<option value="N3">N3</option>
<option value="N4">N4</option>
</select>
<div id="holder"></div>
<input type="submit" value="save" ng-click="savedata()"/>
Javascript-
$("#nut").change(function () {
val = $(this).val();
var ctr = '<input type="text" name="' + val + '"/>';
$('#holder').append(ctr);
});
现在，我想在单击保存按钮时使用AngularJS控制器在数据库的新行中插入所有这些文本框的值。
我知道如何通过使用data-ng-model绑定表单元素数据来对普通表单元素执行此操作。但是，如果没有，如何实现这一目标。的表单元素是可变的。
我尝试这样做
var ctr = '<input type="text" name="data.' + val + '" data-ng-model="data.' + val + '"/>';
<input type="submit" data-ng-click="savedata(data)"/>
AngularJS控制器-
.controller('testController', function ($scope, $http, $location) {
$scope.savedata = function (data) {
debugger;
alert($scope.data);
}
})
但这使数据的值未定义。
那么还有什么可以做的呢？
参考方案
使用AngularJS的数据驱动方法并摆脱jQuery方法来解决问题。您可以按照下面的解决方案。
让我们先来看您的问题。
您有要显示的标签/标签列表。
用户输入的文本必须与用户在选择选项中选择的标签/标签相关联
如果未从选择菜单中选择任何选项，则不显示“文本输入”字段
用户选择标签并输入相应的标签后，然后按Submit。您要将数据保存到后端/数据库。
让我们为此创建一个干净的解决方案。
为此，我们将首先在控制器上工作并设置所需的变量和模型。
angular.controller('testController',['$scope','$http','$location',function($scope,$http,$location){
$scope.optionsList = ['N1','N2','N3','N4','N5']; //List of options to be displayed in select
$scope.selectedOption = 'Select Tags'; //Variable to store the selected option
$scope.textFilled = ''; //this model will store the text entered by the user
$scope.showTextField = false;// this model will decide when to show the text-field
$scope.switchTextFieldStates = function(){
if($scope.selectOptions != 'Select Tags'){
$scope.showTextFields = true;
}else {
$scope.showTextFields = false;
}
$scope.textFilled = ''; //This will ensure that if user changes the option then previously filled data is cleared out of the model
}
$scope.saveData = function(){
console.log($scope.selectedOption,$scope.textFilled);
//Do whatever you want to do here with the data you got
//Reset the state of the view
$scope.showTextFields = false;
$scope.textFillled = '';
$scope.selectedOptions = 'Select Tags';
}
}];
让我们为该问题创建合适的HTML模板。
<select ng-options="item as item in optionsList" ng-model="selectedOption" ng-change="switchTextFieldStates()"></select>
<div id="holder" ng-show="showTextFields"><input type="text" ng-model="textFilled"/></div>
<input type="submit" ng-click="saveData()"/>
我看过几篇有关使整个div可点击的文章，但我希望使其成为可选择的。我所拥有的是一个php while循环，该循环显示基于用户进入mySQL数据库的表。该代码如下所示： <div class='tracksub'> <div class='headname'><div class='…
当<form>'.submit'函数被覆盖时(使用Ajax)将数据获取到php吗？ - javascript我已覆盖此网页上表单的.submit函数，因为该网页已加载在“ index.php”中的#mainContent内，并且我希望“提交”按钮仅替换此#mainContent。我正在尝试将数据从此表单获取到.php文件，以便对数据库进行查询（或简单地回显已填充的变量，以指示已传递数据）。我是AJAX的新手。有人可以向我解释如何将数据传递到.php文件，或者指向要…
使用php重新加载内容 - javascript在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…
用jQuery填充模式形式 - javascript我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…
保留文本区域的数据或值，然后选择输入 - javascript通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…