Develop Reference

Could not delete row or value as per required condition using Angular.js

I need to delete some row or set value as null from the table using Angular.js. I am providing my code below:
<tbody id="detailsstockid">
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_category" name="answer_{{$index}}_category" ng-model="answer.category" ng-options="cat.name for cat in listOfCategory track by cat.value" ng-change="removeBorder($index,answer.category.value,$parent.$index)" ng-init="renderWithMode($index,answer.category.value,$parent.$index,isEditMode)">
<option value="">Select Category</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcategory" ng-options="sub.name for sub in listOfSubCategory[$parent.$index][$index] track by sub.value">
<option value="">Select Subcategory</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<!--<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment">-->
<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answer.comment">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td style="width:20px">
<input ng-show="d.answers.length>1" class="btn btn-sm btn-red" type="button" name="minus" id="minus" value="-" style="text-align:center;" ng-click="removeRow(d.answers, $index,$parent.$index)">
</td>
<td ng-show="$last">
<input type="button" class="btn btn-sm btn-success" name="plus" id="plus" value="+" style="text-align:center;" ng-click="addNewRow(d.answers)">
</td>
<td>
<input type="checkbox" name="answer_{{$index}}_check" ng-model="answer.check" ng-checked="answerIsSelected($parent.$index, $index)" ng-click="toggleAnswerSelected($parent.$index, $index)" ng-disabled="isDisabled($parent.$index, $index)" ng-true-value="true" ng-false-value="false" style="margin-left:10px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Here I have the table row like two dimensional array. I am providing my controller side code below:
$scope.days=[];
$http({
method:'GET',
url:"php/customerInfo.php?action=day",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('day',response.data);
angular.forEach(response.data, function(obj) {
obj.answers = [];
obj.chkbox=[];
$scope.addNewRow(obj.answers);
$scope.days.push(obj);
$scope.selectedAnswers.push(obj);
});
},function errorCallback(response) {
})
}
$scope.addNewRow = function(answers,hasDelete) {
answers.push({
category: null,
subcategory: null,
comment: null,
//hasDelete: hasDelete ? hasDelete : false
});
};
$scope.removeRow = function(answers, index,parent){
//console.log('index',$index);
answers.splice(index, 1);
$scope.listOfSubCategory[parent].splice(index,1);
//answers.splice(answers.length-1,1);
};
$scope.renderWithMode = function(index,catvalue,parent,isEditMode){
if(isEditMode){
$scope.removeBorder(index,catvalue,parent);
}
};
$scope.listOfSubCategory = [];
$scope.removeBorder=function(index,catvalue,parent,com){
console.log('ind',index,catvalue,parent,document.getElementById('answer_'+index+'_'+parent+'_comment').value);
if(catvalue !=undefined){
//console.log('catvalue',catvalue!='');
var subcategories=[];
var catdata=$.param({'action':'subcat','cat_id':catvalue});
$http({
method:'POST',
url:"php/customerInfo.php",
data:catdata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
angular.forEach(response.data,function(obj){
var data={'name':obj.subcat_name,'value':obj.subcat_id};
if(!$scope.listOfSubCategory[parent]){
$scope.listOfSubCategory[parent] = [];
}
//console.log('data',data);
subcategories.push(data);
})
$scope.listOfSubCategory[parent][index]=subcategories;
},function errorCallback(response) {
})
}
}
Here $scope.days have value like below.
$scope.days=[{'day_id':1,'day_name':'Monday'},{'day_id':2,'day_name':'Tuesday'},{'day_id':3,'day_name':'Wednesday'},{'day_id':4,'day_name':'Thursday'},{'day_id':5,'day_name':'Friday'},{'day_id':6,'day_name':'Saturday'},{'day_id':7,'day_name':'Sunday'}]
Here I need to check each row, if the category value is blank/null and the day has more than one child value it will remove. If the day has only one child value and same condition category value is null, it will not remove but the subcategory value will reset. I was doing like below.
$timeout(function() {
var parentLength=$scope.days.length;
for(var i=0;i<parentLength;i++){
var childLength=$scope.days[i].answers.length;
for(var j=0;j<childLength;j++){
if(childLength > 1){
if($scope.days[i].answers[j].category==null){
$scope.days[i].answers.splice(j,1);
}
}else{
if($scope.days[i].answers[j].category==null){
$scope.days[i].answers[j].category=null;
$scope.days[i].answers[j].subcategory=null;
$scope.days[i].answers[j].comment='';
}
}
}
}
}, 1000);
I did like above but it's not working as expected. My plunkr code is given here.

AngularJs : Show Hide Fields According Select Value

I want to show hide form fields on the basis of Select Value. e.g my form has 5 text fields and 1 select option field In those fields 4 fields are depended on select value. if i select cloth then cloth type and cloth value remains, lether type and lether value hide. but when i select Bags lether type and lether value remain else hide. i am trying some condition and ng-class="{'hideCheck': isHideCheck}" model but it behaving abnormally.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>

use ng-hide to hide the element. ng-class is used to alter css.
I changed your code, it will hide element valus and type when option checking is selected, just an example for you, not implement your feather. you would like to read https://docs.angularjs.org/api/ng/directive/ngHide.
by the way , ng-repeat is a good way to do table things.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>

Clear all input text box vale at append time

What I want is that when I click on add more, append all text box with blank value add more function is properly working but at the time of appending input box append with value but I want to clear text box value.
<table>
<tbody>
<tr class="topdivdata">
<td> <input type="text" value="First Name"></td>
<td> <input type="text" value="Last Name"></td>
<td> <input type="text" value="Mobile Number"></td>
</tr>
<tr role="row" class="odd">
<td>
<span class="btn btn-xs cic" id="addnewunit">
<i class="icon-plus"></i>+ Add More</span>
</td>
</tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
unitcount=1;
$('#addnewunit').click(function()
{
var topdiv = $('.topdivdata').html();
var refresdiv=topdiv;
$('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');
unitcount++;
var value = $('.target').val();
$('.list').val(value);
$('.removes1').click(function()
{
$(this).parent().remove();
});
});
</script>
i want to when i click on add more append all text box with blank value add more function properly working but at append time input box upend with value but i want to clear text box value
<table>
<tbody>
<tr class="topdivdata">
<td> <input type="text" value="First Name"></td>
<td> <input type="text" value="Last Name"></td>
<td> <input type="text" value="Mobile Number"></td>
</tr>
<tr role="row" class="odd">
<td>
<span class="btn btn-xs cic" id="addnewunit">
<i class="icon-plus"></i>+ Add More</span>
</td>
</tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
unitcount=1;
$('#addnewunit').click(function()
{
var topdiv = $('.topdivdata').html();
var refresdiv=topdiv;
$('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');
unitcount++;
var value = $('.target').val();
$('.list').val(value);
$('.removes1').click(function()
{
$(this).parent().remove();
});
});
</script>

not understand your question, but you can do like these,
<table>
<tbody>
<tr class="topdivdata">
<td>
<input type="text" value="First Name">
</td>
<td>
<input type="text" value="Last Name">
</td>
<td>
<input type="text" value="Mobile Number">
</td>
</tr>
<tr role="row" class="odd">
<td>
<span class="btn btn-xs cic" id="addnewunit" style="cursor:Pointer;">
<i class="icon-plus"></i>+ Add More
</span>
</td>
</tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>
and script is like,
var unitcount = 1;
$('#addnewunit').click(function () {
//Here i cloned your topDiv, so that i can add new inputs.
var CloneTopDiv = $('.topdivdata').clone(true);
CloneTopDiv.find(':input').attr('value', '');
CloneTopDiv.attr('class', 'txtInput')
CloneTopDiv = CloneTopDiv.html();
var refresdiv = CloneTopDiv;
$('#addmoreunit').append('<tr>.' + refresdiv + '.<td class="removes1"><span class="btn btn-xs" style="cursor:Pointer;"><i class="icon-plus"></i>- Remove</span></td></tr>');
unitcount++;
var value = $('.target').val();
$('.list').val(value);
//Code for Remove added row
$('.removes1').click(function () {
$(this).parent().remove();
});
//Clearing Code
$('.txtInput').val('')
});
See solution at https://jsfiddle.net/eua98tqa/3/

How to add two index in ng-options ans set the value dynamically using Angular.js

I need one help.i need to two index(i.e-$index,$parent.$index) in ng-options object using Angular.js.I am explaining my code below.
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_category" name="answer_{{$index}}_category" ng-model="answer.catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value" ng-change="removeBorder($index,answer.catagory.value,$parent.$index);">
<option value="">Select Category</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcatagory" ng-options="sub.name for sub in listOfSubCatagory[$index+$parent.$index] track by sub.value">
<option value="">Select Subcategory</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<input type="submit" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers, true)">
<div ng-show="$first && !$last">
<input type="submit" name="minus" id="minus" value="-" style="width:20px; text-align:center;" ng-click="removeRow(d.answers, $last)">
</div>
</td>
</tr>
here i need to pass two index with listOfSubCatagory so that i can set multi-dimentional data dynamically .i did some coading but its not working as per requirement.I am explaining my controller side code below.
$scope.listOfSubCatagory = [];
$scope.removeBorder=function(index,catvalue,parent){
console.log('ind',index,catvalue,parent);
$scope.listOfSubCatagory[index+parent]=[];
var catdata=$.param({'action':'subcat','cat_id':catvalue});
$http({
method:'POST',
url:"php/customerInfo.php",
data:catdata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
angular.forEach(response.data,function(obj){
var data={'name':obj.subcat_name,'value':obj.subcat_id};
$scope.listOfSubCatagory[index+parent].push(data);
})
},function errorCallback(response) {
})
}
$scope.days=[];
$http({
method:'GET',
url:"php/customerInfo.php?action=day",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('day',response.data);
angular.forEach(response.data, function(obj) {
obj.answers = [];
$scope.addNewRow(obj.answers);
$scope.days.push(obj);
});
},function errorCallback(response) {
})
}
$scope.addNewRow = function(answers, hasDelete) {
answers.push({
category: null,
subcategory: null,
comment: null,
hasDelete: hasDelete ? hasDelete : false
});
};
$scope.removeRow = function(answers, $index){
answers.splice($index, 1);
};
Please help me to resolve this issue.

I have updated my plunker code for you. If you use similar approach then you may get required results.
Sorry for my spell mistakes in earlier plunk. I improved them now.
You can go through and update your code accordingly,
https://plnkr.co/edit/Px7vY4?p=preview

getting some tr values dynamically with jquery and passe them with ajax to php

I want to pass some td values to ajax call when pressing the button "Delete"
How can I do that with jquery?
<table>
<tr>
<td class="datao">first column</td>
<td class="data1">first column</td>
<td class="data2">first column</td>
<td colspan="2"></td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
UPDATE:
Supposing that I want to grab the value of input type=text inside of the 's.
HTML Example:
<table>
<tr>
<td class="datao">
<select class="someclass">
<option value="asdsa">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="eqw" />
</td>
<td class="datao">
<input type="text" value="gfg" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="wq">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="hfd" />
</td>
<td class="datao">
<input type="text" value="vcv" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="cva">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="ewd" />
</td>
<td class="datao">
<input type="text" value="asad" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
jquery's code:
Let's say I want to grab select's value each row of data...
$('input.deleteRow').live('click', function() {
var values = [];
$(this).closest('tr').find("select").each(function() {
values.push($(this).attr('value'));
});
//Confirm
//the ok stores true or false returned by confirm!
var ok = confirm("Are you sure...?");
//testing for true
if(ok){
$.post("phpscript.php", { someName:values[0] }, function(data) {
if(data == '1'){
alert("something");
location.reload();
}
else
alert("something else, error probably");
});
}
});
If you want to grab select and input type="text" just need to do: ...find("select, input[type=text]")...
This is my contribute to the community.
Anyway, I would like to find an elegant way of sending the data to the php script give a hand on it.

May use http://www.datatables.net/ - much easier than program all by your self?

You will want to attach an event handler to each of the input buttons that will go to the button's parent (<td>) and then go to that node's siblings (the other <td>s). For each of these you will get the inner HTML for the respective <td> and then figure out some way to pair these all together (delimited string maybe?)
$('input.deleteRow').live('click', function() {
var returnString = '';
$(this).parent().siblings().each(function() {
returnString += $(this).html();
});
$.ajax({
url: 'somephpurlhere.php',
data: returnString
}).success(function() {
//dosomething
}).fail(function() {
//dosomethingelse
});
});
You will need to modify the .ajax call to suit your needs as you haven't expressed how you are handling responses, etc.
If you want to check if a given DOM element contains a td or an input then you could replace the .each functionality as follows:
$(this).parent().siblings().each(function() {
if ($(this).find('td').length > 0)
resultString += $(this).find('td').html();
else if ($(this).find('input').length > 0)
resultString += $(this).find('input').val();
else
resultString += $(this).html();
});