Is there a way to include the name attribute in the input tag using angular.js? I am able to add a question field with just a click, and similarly, an option input can also be added. However, the issue arises when trying to add a new option, as the name attribute turns out to be blank like this: name="qz_options[]". What I want is to bind some data here, like this:
name="qz_options[{{formData.qz_question[$index + 1]}}]"<fieldset ng-repeat="row in rows">
<div class="form-group ">
<label>Enter Your Contest Question</label>
<div class="row">
<div class="col">
<input type="text" name="qz_question[]" class="form-control"
ng-model="formData.qz_question[$index + 1]" />
</div>
<div class="col-md-1">
<button type="button" name="remove" ng-model="row.remove" class="btn btn-danger btn-md" ng-click="removeRow(row)"><span class="glyphicon glyphicon-minus"></span></button>
</div>
<fieldset ng-repeat="option in options" class="col-12 mt-3 bg-white p-3">
<label>Options</label>
<div class="row">
<div class="col">
<input type="text" name="qz_options[{{formData.qz_question[$index + 1]}}]" class="form-control" />
</div>
<div class="col-3">
<button type="button" name="remove" ng-model="option.remove" class="btn btn-danger btn-sm" ng-click="removeOptionRow(row)"><span class="glyphicon glyphicon-minus"></span></button>
<button type="button" name="add_more_option" ng-model="option.options" ng-click="addOpp()" class="btn btn-success btn-sm" >
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</fieldset>
<div class="col-md-12 mt-3"><hr></div>
</div>
</div>
</fieldset>
<div class="form-group">
<button type="button" name="add_more" class="btn btn-success" ng-click="addRow()"><span class="glyphicon glyphicon-plus"></span> Add Question</button>
<input type="submit" name="submit" class="btn btn-info" value="Save Contest" />
</div>
var app = angular.module('dynamicApp', []);
app.controller('dynamicController', function($scope, $http){
$scope.success = false;
$scope.error = false;
$scope.rows = [{name: 'qz_question[]', name: 'remove'}];
//options
$scope.options = [{name: 'qz_options[{{formData.qz_question[$index + 1]}}]', name: 'remove'}];
$scope.addRow = function(){
var id = $scope.rows.length + 1;
$scope.rows.push({'id':'dynamic'+id});
};
$scope.removeRow = function(row){
var index = $scope.rows.indexOf(row);
$scope.rows.splice(index, 1);
};
$scope.addOpp = function(){
var id = $scope.options.length + 1;
$scope.options.push({'id':'dynamic'+id});
};
$scope.removeOptionRow = function(row){
var index = $scope.options.indexOf(row);
$scope.options.splice(index, 1);
};
$scope.formData = {};
$scope.submitForm = function(){
alert("working");
// $http.get('api/url-api').then(successCallback, errorCallback);
$http({
method:"POST",
url:"insert.php",
data:$scope.formData
}).then(
function(data)
{
// alert(JSON.parse(data));
alert(JSON.stringify(data,null, 4));
if(data.error != '')
{
$scope.success = false;
$scope.error = true;
$scope.errorMessage = data.error;
}
else
{
$scope.success = true;
$scope.error = false;
$scope.successMessage = data.message;
$scope.formData = {};
$scope.rows = [{name: 'programming_languages[]', name: 'remove'}];
//$scope.fetchData();
}
}, function(error){
alert(error);
});
};
});