[英]Can not set value dynamically using Angular.js
I have an issue.I can not set value into drop down list dynamically using Angular.js and PHP. 我有一个问题,我无法使用Angular.js和PHP将值动态设置到下拉列表中。
<tr ng-repeat="d in days">
<td>{{d.day}}</td>
<td>
<select class="form-control" id="catagory" ng-model="catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value " ng-change="removeBorder('catagory',$index,catagory.value);" >
</select>
</td>
<td>
<select class="form-control" id="subcatagory[$index]" ng-model="subcatagory[$index]" ng-options="sub.name for sub in listOfSubCatagory[$index] track by sub.value " >
<option value="">Select Subcategory</option>
</select>
</td>
<td>
<input type="text" name="comment" id="comment" class="form-control oditek-form" placeholder="Add Comment" ng-model="comment" ng-keypress="clearField('comment');">
</td>
</tr>
When user will select first column drop down list value the respective second drop down list value will set dynamically as per $index.the below is my controller side code. 当用户选择第一列下拉列表值时,相应的第二个下拉列表值将根据$ index动态设置。以下是我的控制器端代码。
$scope.removeBorder=function(id, index, catvalue) {
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) {
//console.log('sub', response.data);
angular.forEach(response.data, function(obj) {
var data = {'name' : obj.subcat_name, 'value' : obj.subcat_id};
$scope['listOfSubCatagory' + index] = data ;
})
}, function errorCallback(response) {
})
}
Please help me to resolve this issue. 请帮助我解决此问题。
You are using listOfSubCatagory[$index] in ng-options of second dropdown but in the ajax response you are setting data to $scope['listOfSubCatagory'+index] = data ; 您在第二个下拉菜单的ng-options中使用listOfSubCatagory [$ index],但是在ajax响应中,您将数据设置为$ scope ['listOfSubCatagory'+ index] = data;
Hence, You will not get the variable listOfSubCatagory as array, it will be listOfSubCatagory0, listOfSubCatagory1, etc.. and these variables will hold a single option at a time instead of array of options. 因此,您将不会获得变量listOfSubCatagory作为数组,而是listOfSubCatagory0,listOfSubCatagory1等。并且这些变量一次只能保存一个选项,而不是选项数组。
Modify your controller script like this and give a try. 像这样修改您的控制器脚本并尝试。
$scope.listOfSubCatagory = [];
$scope.removeBorder=function(id,index,catvalue){
var catdata=$.param({'action':'subcat','cat_id':catvalue});
$scope.listOfSubCatagory[index] = [];
$http({
method:'POST',
url:"php/customerInfo.php",
data:catdata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('sub',response.data);
angular.forEach(response.data,function(obj){
var data={'name':obj.subcat_name,'value':obj.subcat_id};
$scope.listOfSubCatagory[index].push(data);
})
},function errorCallback(response) {
})
}
Change your code as follows 如下更改代码
$scope.removeBorder=function(id,index,catvalue){
var listOfSubCatagory=[];
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){
//console.log('sub',response.data);
angular.forEach(response.data,function(obj){
var data={'name':obj.subcat_name,'value':obj.subcat_id};
$scope.listOfSubCatagory.push(data) ;
})
},function errorCallback(response) {
})
}
Hope this will help you. 希望这会帮助你。
<select class="form-control" ng-model="subcatagory" id="subcatagory">
<option value="">Select Subcategory</option>
<option ng-repeat="size in sizes" ng-attr-value="{{size.subcat_id}}">{{size.subcat_name}}
</option> </select>
$scope.removeBorder=function(id,index,catvalue){
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){
//console.log('sub',response.data);
$scope.sizes=response.data;
},function errorCallback(response) {
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.