Невозможно установить значение динамически с помощью Angular.js

Question

У меня проблема. Я не могу установить значение в выпадающем списке динамически с помощью 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> 

Когда пользователь выберет первый столбец выпадающего списка значение соответствующего второго выпадающего списка значение будет устанавливать динамически в соответствии с $ index.the ниже на моей стороне контроллера код.

$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) { 
    }) 
} 

Пожалуйста, помогите мне решить эту проблему.

Answer 1

Вы используете listOfSubCatagory [$ индекс] в нг-вариантов второго выпадающего списка, но в AJAX ответ вы настраиваете данные в $ объеме [ «listOfSubCatagory» + индекс] = данные;

Следовательно, вы не получите переменную listOfSubCatagory как массив, это будет listOfSubCatagory0, listOfSubCatagory1 и т. Д., И эти переменные будут содержать одну опцию одновременно, а не массив параметров.

Измените свой скрипт контроллера следующим образом и попробуйте.

$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) { 
     }) 
    } 

Answer 2

Измените код следующим образом

 $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) { 
       }) 
      } 

Надеется, что это поможет вам.

Answer 3

<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) { 
     }) 
    }