我需要使用Angular.js从表中删除某些行或设置值为null。我在下面解释我的代码。
<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>
这里我有像二维数组一样的表格行。我正在解释下面的控制器端代码。
$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) {
})
}
}
此处$scope.days的值如下所示。
$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'}]
在这里，我需要检查每一行，如果类别值为blank/null且该日期有多个子值，它将删除。如果日期只有一个子值且相同的条件类别值为null，则不会删除，但子类别值将重置。我在下面这样做。
$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);
我确实喜欢上面但它没有按预期工作。我在这里给出了plunkr code。