Angular JS add new row be in editable mode as default - javascript

I am creating a grid using the ng-repeat directive, but by clicking on new row , the new row is not in editable mode as a default and user has to click on edit button. how can I make a new row in editable mode ?
<!-- <tr ng-repeat="primaryskill in primarySkills"> -->
<tr ng-repeat="skill in skills">
<td>
<!-- <span editable-text="primaryskill.name" e-name="name" e-form="rowform"> -->
<span editable-text="skill.primarySkill.name" e-name="name" e-form="rowform">
{{ skill.primarySkill.name || 'empty' }}
</span>
</td>
<td >
<tags-input ng-model="skill.primarySkill.skillGroups" display-property="name" replace-spaces-with-dashes="false" on-tag-added="saveSkillGroup($tag,skill.primarySkill,$index)" on-tag-removed="removeSkillGroup(skill.primarySkill)">
<auto-complete source="loadskillGroups($query)" display-property="name" load-on-focus="true" min-length="0" load-on-empty="true"></auto-complete>
</tags-input>
<!-- <p>Model: {{skill.primarySkill.skillGroups}}</p> -->
</td>
<td>
<tags-input ng-model="skill.secondarySkills" display-property="name" on-tag-added="saveSecondarySkill($tag,$tag.id, skill.primarySkill)" on-tag-removed="removeSecondarySkill($tag,skill.secondary)">
<!-- <auto-complete source="loadsecondarySkills($query,skill.primarySkill.id)" display-property="name" min-length="0" load-on-empty="true"></auto-complete> -->
</tags-input>
<!-- <p>Model: {{skill.secondarySkills}}</p> -->
</td>
<td style="white-space: nowrap;text-align: center;" class="col-xs-12 col-xs-offset-3">
<!-- form -->
<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill.primarySkill, $index)">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary" >
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div >
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removePrimarySkill(skill.primarySkill)">del</button>
</div>
</div>
</td>
</tr>
</table>
<div id="myprimarySkills">
<button class="btn btn-default" ng-click="addSkill(primaryskill)">Add Skill</button>
</div>
</div>


I believe you're using xeditable forms. Just try to add shown="true" on form element.
Example (just try to replace your form line with this):
<form editable-form name="rowform" shown="true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
Also you can do it via ng-init:
<form editable-form name="rowform" ng-init="rowform.$show()" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
Update:
<form editable-form name="rowform" shown="skill.editable === true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
$scope.addSkill = function (someParam) {
$scope.skills.push({
editable: true
//some other staff you're implementing
});
}

Related

Why is data-bind: enable only working in some cases?

Im trying to enable some buttons when $root.questions.editQuestionDialog.question().canBeDeleted is true. This only works in some cases. For my buttons in the end of the file the expression is always false, even though its set to true when I inspect the property.
<div id="headerContent" style="display: none" data-bind="visible: menu.isMenuActive('Questions')">
<fieldset data-bind="with: questions">
<legend>Questions <span data-bind="text: headerName"></span></legend>
<div class="alert alert-info" data-bind="visible: $parent.blockId == 0">
You must save before you can add questions
</div>
<div data-bind="visible: $parent.blockId > 0">
<button class="btn btn-info" data-bind="click: addQuestion, enable:writeEnabled">Add Question</button>
<div class="control-group">
<div data-bind="sortable: {data:groups, beforeMove:$root.questions.allowGroupDrop, afterMove : $root.questions.saveGroupOrder}" class="pointer">
<div>
<h1><i class="icon-move topMargin10"></i> <span data-bind="text:number() + '. ' + name()"></span></h1>
<div data-bind="if:questions">
<table >
<tbody data-bind="sortable: {data:questions, afterMove : $root.questions.saveOrder, beforeMove: $root.questions.allowQuestionDrop, options : {handle : '.sortableHandle', cursor: 'move'} }">
<tr class="items">
<td class="sortableHandle moveCursor" width="770px" >
<!-- <label data-bind="text: ko.toJSON($data, null, 2)"></label> -->
<i class="icon-move"></i>
<span data-bind="style: { textDecoration:disabled() ? 'line-through' : 'normal' }, click:$root.questions.editQuestion, text: $parentContext.$index()+1 + '.' + (order()+1) + '. ' + shortText()"></span>
<button class="btn btn-danger btn-mini right" style="float:right; width:48px; text-align: center;"
data-bind="visible:$data.canBeDeleted() && $root.questions.writeEnabled, click: $root.questions.deleteQuestion">Delete</button>
<button class="btn btn-warning btn-mini right" style="float:right; width:48px; text-align: center;"
data-bind="visible:$data.canBeDisabled() && $root.questions.writeEnabled, click: $root.questions.disableQuestion">Disable</button>
<button class="btn btn-success btn-mini right" style="float:right; width:48px; text-align: center;"
data-bind="visible:$data.canBePublished() && $root.questions.writeEnabled, click: $root.questions.publishQuestion">Publish </button>
<!-- ko foreach:options-->
<div class="left" style="margin-left:50px;margin-top:2px" data-bind="if:subQuestion.text">
<i class="icon-angle-right"></i> <span data-bind="text: subQuestion.text()"></span>
</div>
<!-- /ko-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="hidden" data-bind="jqdialog : {title : $root.questions.editQuestionDialog.questionIsDisabled() || !$root.questions.writeEnabled() ? 'View Question' : 'Edit Question', trigger: questions.editQuestionDialog.isOpen, options: {width:880, position: ['center',180]}}">
<div class="control-group" data-bind="if: $root.questions.editQuestionDialog.question">
<form style="padding-bottom: 15px;">
<div data-bind="if: $root.questions.editQuestionDialog.question">
<div class="control-group" data-bind="with:questions, visible: $root.questions.editQuestionDialog.question().parentOption == null ">
<div class="controls-row">
<label class="span10 wellLabel">Question Group</label>
</div>
<div class="controls controls-row">
<table>
<tr>
<td>
<select data-bind="visible: (!editQuestionDialog.addGroupIsActive() && !editQuestionDialog.questionIsDisabled()) , value : editQuestionDialog.question().questionGroupId,
options: groups,
optionsText: 'name',
optionsValue : 'id'"></select>
<input type="text" data-bind="visible:editQuestionDialog.addGroupIsActive() && !editQuestionDialog.questionIsDisabled(), textInput:editQuestionDialog.newGroupName, hasFocus:editQuestionDialog.addGroupHasFocus, event: { keyup: editQuestionDialog.inputnewGroupkeyUp }" />
<input type="text" disabled data-bind="visible:!editQuestionDialog.addGroupIsActive() && editQuestionDialog.questionIsDisabled(), value:editQuestionDialog.groupName()" />
</td>
<td>
<label class="btn btn-info" data-bind="visible: !editQuestionDialog.addGroupIsActive() && !editQuestionDialog.questionIsDisabled() , click:editQuestionDialog.addGroup" type="button">Add new group</label>
<label class="btn btn-primary" data-bind="visible:editQuestionDialog.addGroupIsActive , click:editQuestionDialog.saveGroup">Save Group</label>
<label class="btn btn-danger" data-bind="visible:editQuestionDialog.viewCancel, click:editQuestionDialog.closeAddGroup">Cancel</label>
</td>
</tr>
</table>
</div>
</div>
<div data-bind="visible:questions.editQuestionDialog.question().questionGroupId">
<div data-bind="if:questions.editQuestionDialog.question().parentOption">
<div class="well">
<span class="label label-info">Sub question</span>
<ul class="breadcrumb">
<li></li>
<li>/</li>
<li> <span data-bind=" text:questions.editQuestionDialog.question().parentOption.text()"></span></li>
</ul>
</div>
</div>
<div class="controls controls-row">
<label class="span7 wellLabel">Question</label>
<label class="span3 wellLabel">Required</label>
</div>
<div class="controls controls-row">
<input type="text" id="editQuestiontext" class="input-medium span7" data-bind="textInput: $root.questions.editQuestionDialog.question().text, enable:!$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted" maxlength="300" />
<select class="span3" data-bind="enable:!$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted, options: $root.questions.editQuestionDialog.isCorrectOptions, optionsText: 'text', optionsValue: 'value', value:$root.questions.editQuestionDialog.question().isRequired"></select>
</div>
<div class="controls controls-row">
<label class="span10 wellLabel">Type of question</label>
</div>
<div class="controls-row" data-bind="disable:$root.questions.editQuestionDialog.questionIsDisabled()">
<div id=questionTypeChoice class="btn-group" data-bind="with:$root.questions.editQuestionDialog">
<button class="btn" type="button" data-bind="click:function(){setQuestionType(2);}, css :{'btn-primary' :question().type() == 2}">Yes/No</button>
<button class="btn" type="button" data-bind="click:function(){setQuestionType(1);},css :{'btn-primary' : question().type() == 1}">Free text</button>
<button class="btn" type="button" data-bind="click:function(){setQuestionType(3);},css :{'btn-primary' : question().type() == 3}">Single choice</button>
<button class="btn" type="button" data-bind="click:function(){setQuestionType(4);},css :{'btn-primary' : question().type() == 4}">Multi choice</button>
</div>
</div>
</div>
<div data-bind="visible: $root.questions.editQuestionDialog.showOptions">
<div class="controls controls-row">
<label class="wellLabel span10">Options</label>
</div>
<div class="controls controls-row">
<table class="table">
<thead>
<tr class="primary">
<th>Text</th>
<th>Is correct</th>
<th colspan="3">Points</th>
</tr>
</thead>
<tbody data-bind="visible: $root.questions.editQuestionDialog.question().type() > 2">
<tr class="success">
<td class="span4">
<input type="text" class="span5" data-bind="enable: !$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted, textInput:$root.questions.editQuestionDialog.newOption.text, hasFocus:$root.questions.editQuestionDialog.newOption.hasFocus" />
</td>
<td class="span2">
<select class="span1" data-bind="enable:!$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted, options: $root.questions.editQuestionDialog.isCorrectOptions, optionsText : 'text', optionsValue:'value', value :$root.questions.editQuestionDialog.newOption.isCorrect "></select>
</td>
<td class="span2">
<select class="span1" data-bind="enable:!$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted, options:$root.questions.editQuestionDialog.pointValues, value:$root.questions.editQuestionDialog.newOption.point"></select>
</td>
<td class="span2">
<button class="btn btn-primary" data-bind="visible: !$root.questions.editQuestionDialog.questionIsDisabled(), click: $root.questions.editQuestionDialog.addNewOption, enable:$root.questions.editQuestionDialog.newOption.text().length > 0">Add</button>
</td>
</tr>
</tbody>
<div disabled>
<tbody id="dataGrid" data-bind="foreach: $root.questions.editQuestionDialog.optionsForType">
<tr class="sortable-bulk moveCursor", draggable="true" data-bind="disable:$root.questions.editQuestionDialog.questionIsDisabled(), event:{drop: function(data,e) {$root.questions.editQuestionDialog.doOptionDrop(e,data);},
dragover:function(data,e) {$root.questions.editQuestionDialog.doAllowOptionDrop(e,data);},
dragleave:function(data,e) {$root.questions.editQuestionDialog.doDragOptionLeave(e,data);},
dragstart:function(data,e) {return $root.questions.editQuestionDialog.doOptionDrag(e,data);}}">
<td class="span4" >
<div>
<div>
<input id="optText" onclick="this.focus(); this.blur(); this.focus();" type="text" class="span5" data-bind="enable: !$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted, textInput:text"/></td>
</div>
</div>
<td class="span2">
<select class="span1" data-bind="enable: !$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted, options: $root.questions.editQuestionDialog.isCorrectOptions, optionsText : 'text', optionsValue:'value', value :isCorrect, event : {change : $root.questions.editQuestionDialog.isCorrectHasChanged}"></select>
</td>
<td class="span2">
<select class="span1" data-bind="enable: !$root.questions.editQuestionDialog.questionIsDisabled() && $root.questions.editQuestionDialog.question().canBeDeleted, options:$root.questions.editQuestionDialog.pointValues, value:point"></select>
</td>
<td class="span4">
<button class="btn btn-danger" data-bind="click: $root.questions.editQuestionDialog.removeOption, visible: $root.questions.editQuestionDialog.question().type() > 2 && !$root.questions.editQuestionDialog.questionIsDisabled()">Remove</button>
<button class="btn btn-info" data-bind="visible : $root.questions.editQuestionDialog.question().parentOption == null && $root.questions.editQuestionDialog.question().type() != 4 && !$root.questions.editQuestionDialog.questionIsDisabled(), click: $root.questions.editQuestionDialog.addSubQuestion, text: subQuestion.text() != null ? 'Edit sub question' : 'Create sub' ">Sub question</button>
<button class="btn btn-info" data-bind="visible : $root.questions.editQuestionDialog.question().parentOption == null && $root.questions.editQuestionDialog.question().type() != 4 && $root.questions.editQuestionDialog.questionIsDisabled() && subQuestion.text() != null , click: $root.questions.editQuestionDialog.addSubQuestion, text: subQuestion.text() != null ? 'Show sub question' : null ">Sub question</button>
</td>
</tr>
</tbody>
</div>
</table>
</div>
</div>
</div>
</form>
</div>
<div>
<button style="margin: 0px 5px 0px 0px" class="btn pull-right" data-bind="click: questions.editQuestionDialog.close">Close</button>
<button style="margin: 0px 5px 0px 0px" class="btn btn-warning pull-right" data-bind="click: questions.editQuestionDialog.clearQuestion, enable: $root.questions.editQuestionDialog.question().canBeDeleted">Clear</button>
<button style="margin: 0px 5px 0px 0px" class="btn btn-info pull-right" data-bind="click: questions.editQuestionDialog.saveQuestion, enable:questions.editQuestionDialog.questionIsValid && $root.questions.editQuestionDialog.question().canBeDeleted">Save</button>
</div>
</div>
</div>
The code is all the code in the same file and the expression works in all other places but for the "Save" and "Clear" buttons at the bottom of the file. What could be the problem? Do you need to write the expression differently for data-bind: visible and enable?

I solved this by just moving my buttons inside of the form a few rows up. Not really sure why this works but I'm guessing it has to do with the bindings as someone said.

Angular 2 upload Image button is refreshing page

I have a html form with two buttons on it:-
[1] One button is used to upload an image file (.jpg)
[2] and the second one is to submit the form.
The problem is that the upload image button seems to be refreshing the page after the method for uploading the image has completed. Below is my html:-
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="submit" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
My code for the uploadImage method is below:-
uploadImage(e) {
let files = this.elem.nativeElement.querySelector('#selectFile').files;
let formData = new FormData();
let file = files[0];
formData.append('selectFile', file, file.name);
this._imageService.uploadImage(formData)
.subscribe(
image => {
console.log(image);
this.addImageIdToHtml(image)
e.preventDefault();
e.stopPropagation();
},
error => console.log(error)
);
}
As soon as the above method has finished running the page appears to refreshing causing my app to go back to the land page. This is not the behaviour I want. What I actually want is the form page to be retained until the Submit form button is pressed. Can anyone help me please?

Use div tags instead of form tag.
Change the button type as button.
<button type="button">Upload Image</button>
Modify the code as follows.
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="button" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</div>
</div>
</div>

You should not upload files on Angular folders like (Assets) , cuz it will recompile every time new file added to Angular environment and that will cause you the page refreshment you didn't want.

If you are using button tag inside the form tag, add type="button" inside the button tag.
<button type="button"></button>
This will work perfectly

how to submit a non-form element using angular2

<tbody>
<tr *ngFor="let gasType of staffConfig.gasTypes">
<td class="col-md-3">
<input class="gas-name form-control" type="text" [(ngModel)]="gasType.name" name="gasName"
[disabled]="!isStaffEnabled">
</td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<h3 class="panel-title">
<img src="/assets/brand-icon.png">
<span>Brands</span>
</h3>
</div>
<!-- Table -->
<table class="table">
<tbody>
<tr *ngFor="let brand of staffConfig.brands;let i = index;">
<td>
<input class="form-control" type="text" [(ngModel)]="brand.name" name="brands"
[disabled]="!isStaffEnabled">
</td>
</tr>
</tbody>
</table>
</div>
</tab>
<button id="saveChangesBtn" type="button" class="btn btn-primary" disabled>Save Changes</button>
I want to bind the "save" button to a method in the component. So I changed:
<button id="saveChangesBtn" type="button" (ngSubmit)="registerUser(registrationForm.value) class="btn btn-primary" disabled>Save Changes</button>
but then, if that's not a <form> how do I bind the fields to a model?
In other words how can I send these fields to the server?
I have to read them from the component and then assemble an object.
But how can I access the non-form model like registrationForm.value?

If you are using ngModel outside of the <form> you must specify [ngModelOptions]={standalone:true}.
Template
<div class="not-a-form">
<input type="text" [(ngModel)]="model.foo" [ngModelOptions]="{standalone: true}" />
<input type="text" [(ngModel)]="model.bar" [ngModelOptions]="{standalone: true}" />
<button type="button" (click)="save(model)"> Send </button>
</div>
Component
#Component({
selector: 'selector',
...
})
class SomeComponent {
model: any = {};
save(data) {
console.log(data);
}
}

ng-Click does not works in ng-repeat table

I have aproblem with angularjs ng-click does not works, my model is not updated.
When I want to read the model variables are empty.
I'm using bootstrap popup to show the model values(title, action is using for validation in a funciton inside controller).
HTML code
<button ng-click="title = 'Add Project'; action='Add'" data-toggle="modal" data-target="#myModal" id="btnOpenPopUpForAdding" class="btn btn-default" title="Add new project"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
<table class="table" id="tblProjects" style="display:none;">
<thead>
<tr>
<th>
</th>
<th>
Project Name
</th>
<th>
Project Description
</th>
</tr>
</thead>
<tr ng-repeat="project in projects" >
<td>
<button ng-click="title = 'Update Project'; action='Update'" data-toggle="modal" data-target="#myModal" class="btn btn-default" title="Update project">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
</td>
<td>
<span>{{project.ProjectName}}</span>
</td>
<td>
<span>{{project.ProjectDescription}}</span>
</td>
</tr>
</table>
#Html.Partial("../ProjectView")
</div>
Partial view
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<label for="txtProjectName">Project Name</label>
<input ng-model="singleProject.ProjectName" type="text" class="form-control" style="width:65%" id="txtProjectName" placeholder="Type the project name" />
<br />
<label for="txtProjectDescription">Project Description</label>
<textarea ng-model="singleProject.ProjectDescription" class="form-control" style="width:65%" id="txtProjectDescription" placeholder="Type the project description" rows="4"></textarea>
</div>
<div class="modal-footer">
<button id="btnSave" type="button" class="btn btn-primary" ng-click="ThrowEvent()">Save</button>
<button id="btnCancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
Controller code
$scope.ThrowEvent = function () {
if ($scope.action == 'Add')
$scope.AddProject($scope.singleProject);
if($scope.action == 'Update')
$scope.UpdateProject($scope.singleProject);
//if($scope.action == 'Delete')
}

The issue is that ng-repeat creates separate child scopes. In your case ng-click="title = 'Update Project'; action='Update'" where title and action are assigned to the child scope, not the parent.
To fix this you must prefix your model in your controller, for example
$scope.myActions = {title: 'Default Title', action: 'Default action'};
Then you can change ng-click="title = 'Update Project'; action='Update'" to ng-click="myActions.title = 'Update Project'; myActions.action='Update'"

ng-repeat will create a new scope for each iteration.
"title = 'Update Project'; action='Update'" will execute successful, but it will write the values to the sub-scope of ng-repeat and is not visible by the controller.
To solve the issue you can create a data container in the controller
$scope.data = {};
and write to the container
ng-click="data.title = 'Update Project'; data.action='Update'"`

form submit don't recognize dynamically added input (using JavaScript)

I have html code with form:
<tr>
<form action="/some_action/" method="POST" id="send_form" class="test-form">
{% csrf_token %}
</div>
<button type="button" class="btn-add btn btn-info" aria-label="Left Align">
add <span class="glyphicon glyphicon-plus-sign"/>
</button>
</td>
<td>
<div class="courier-date-from-data">
</div>
</td>
<td>
<div class="courier-date-to-data">
</div>
</td>
<td>
<div class="start-km-data">
</div>
</td>
<td>
<div class="end-km-data">
</div>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-options btn-default dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li type="submit" class="btn-options-save"><a onclick="">save</a></li>
<li class="btn-options-cancel"><a onclick="">cancel</a></li>
</ul>
</div>
</td>
</form>
and input templates on the bottom:
<input type="number" class="form-control start-km-template" style="display: none;" name="" id="">
<input type="number" class="form-control end-km-template" style="display: none;" name="" id="">
JavaScript:
var selector2 = "start-km-0";
$( ".start-km-template" )
.clone()
.removeClass("start-km-template")
.css("display","block")
.addClass(selector2)
.attr("id", selector2)
.attr("name", selector2)
.appendTo(".start-km-data");
When I want to submit request (using just input with type="submit"), form don't recognize new input field in form tag.
How to fix this ?

Categories

Resources