0

I have an issue.I can not set value into drop down list dynamically using Angular.js and 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.

$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.

Improve this question
6
  • 1
    The fact that you are using PHP seems to be irrelevant to this question. You may consider removing the PHP tag. Commented Feb 25, 2016 at 7:08
  • i am using php for backend. Commented Feb 25, 2016 at 7:11
  • Are you trying to populate the second dropdown or trying to set the selected value in the second dropdown? Commented Feb 25, 2016 at 7:19
  • easier to help if you'd provide a plunkr Commented Feb 25, 2016 at 7:20
  • @Siva : i am trying to populate value in second drop down of the same row where the forst drop down get selected. Commented Feb 25, 2016 at 7:23

3 Answers 3

Reset to default
1

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 ;

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.

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) {
        })
    }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

i did as per you but it gave me this Cannot read property 'push' of undefined result.
Did you add this line $scope.listOfSubCatagory[index] = []; ?
i added you latest line but again this TypeError: Cannot set property '0' of undefined at that line.
Did you define this $scope.listOfSubCatagory = []; outside of your function? I have added two line of code and modified one line totally.
0

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.

Improve this answer

3 Comments

what you did i need to set value in the row second drop down list.Your idea will add in all rows drop down list.
OK. Could you please more intact in which functionality you are trying to implement.
my requirement is suppose user select value from first row first column drop down list,then the required value should set in second drop down list of the same row not in other row.
0 
<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) {
        })
    }
Improve this answer

1 Comment

I need to set value inside drop down list according to the $index value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.