無法使用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動態設置。以下是我的控制器端代碼。

$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

您在第二個下拉菜單的ng-options中使用listOfSubCatagory [$ index]，但是在ajax響應中，您將數據設置為$ scope ['listOfSubCatagory'+ index] = data;

因此，您將不會獲得變量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) {
        })
    }