アングルリクエストで新しいアバターリクエストを呼び出すことができません

Question

国、州、都市のように3つのドロップダウンがあります。これはajax reuestを使用しています。 次に、私の新しいbuttionを使用して新しいdropdowns divを追加します。myfirstのdropdown divのデータが渡されて表示され、正常に動作しますが、他のdivのドロップダウンデータは渡されず、表示されず、ajaxリクエストは送信できません。

それはそれは私の角度のjsコード

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script type="text/javascript"> 
    var app = angular.module('shanidkvApp', []); 

    app.controller('MainCtrl', function($scope) { 

    $scope.choices = [{id: 'choice1'}]; 

    $scope.addNewChoice = function() { 
     var newItemNo = $scope.choices.length+1; 
    $scope.choices.push({'id':'choice'+newItemNo}); 
    }; 

    $scope.removeChoice = function() { 
    var lastItem = $scope.choices.length-1; 
    $scope.choices.splice(lastItem); 
    }; 

}); 

とその私のhtml

<div class="content-wrapper" ng-app="shanidkvApp"> 
<!-- Content Header (Page header) --> 
<section class="content-header"> 
    <h1> 
    Add Challan Details 
    <a href="/challan/challan" class="btn btn-primary waves-effect waves-light pull-right"><i class="fa fa-list"></i> challan Details List</a> 
    </h1> 
</section> 

<!-- Main content --> 
<section class="content"> 
    <div class="row"> <div class="col-md-12 display_alert"></div></div> 
    <div class="row"> 
    <div class="col-md-6"> 
     <div class="box box-primary" ng-app="angularjs-starter" ng-controller="MainCtrl"> 
     <div class="box-body table-responsive"> 
      <form action="insert" method="post" data-parsley-validate novalidate enctype="multipart/form-data"> 





     <div data-ng-repeat="choice in choices"> 

       <div class="form-group"> 
        <label for="form-address">Model Name</label>            
        <select name="country_details" class="form-control countries" id="country_details" onChange="getstatedetails(this.value)"> 
          <option value="" selected="selected" >Select Model</option> 
          <?php foreach($groups as $count): ?> 
          <option value="<?php echo $count->model_id; ?>"><?php echo $count->model_name; ?></option> 
          <?php endforeach; ?> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="form-address">Finish Name</label> 
        <select name="select_state" class="form-control countries" id="old_state" onChange="getcitydetails(this.value)"> 
          <option selected="selected">Select Finish</option> 
        </select> 
       </div> 

       <div class="form-group"> 
        <label for="form-address">Size</label> 
        <select name="selectcity" class="form-control countries" id="old_city" > 
          <option selected="selected">Select Size</option> 
        </select> 
       </div> 

       <div class="btn btn-primary" ng-show="$last" ng-click="removeChoice()">Remove</div>  

     </div> 
     <div class="btn btn-primary" ng-click="addNewChoice()">Add fields</div>  


       <div class="form-group text-right m-b-0"> 
        <button class="btn btn-primary waves-effect waves-light" type="submit">Save</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 
</section> 
<!-- /.content --> 

だ私のAJAXリクエスト

<script> 
function getstatedetails(id) 
{ 
    //alert('this id value :'+id); 
    $.ajax({ 
     type: "POST", 
     url: 'ajax_get_finish/'+id, 
     data: id='cat_id', 
     success: function(data){ 
     // alert(data); 
      $('#old_state').html(data); 
    }, 
    }); 
} 
function getcitydetails(id) 
{ 

    $.ajax({ 
     type: "POST", 
     url: 'ajax_get_size/'+id, 
     data: id='st_id', 
     success: function(data){ 

      $('#old_city').html(data); 
    }, 
    }); 
} 

ですAJAXで

Answer 1

データobject形式でなければなりません

function getstatedetails(id) 
{ 
    //alert('this id value :'+id); 
    $.ajax({ 
    type: "POST", 
    url: 'ajax_get_finish/'+id, 
    data: id='cat_id', 
    success: function(data){ 
    // alert(data); 
     $('#old_state').html(data); 
    }, 
    }); 
} 

のplsは一緒にjQueryとAngularJSを使用して

$.ajax({ 
... 
data: { id: 'cat_id' } 
}) 

Answer 2

停止してみてください。

データが必要な場合は、AngularJSも使用してください。例えば

、

app.factory('requestFactory', function($q, $http) { 
    var ret = { 
     getStateDetails: getStateDetails, 
     getCityDetails: getCityDetails 
    }; 

    return ret; 

    function getStateDetails(id) { 
     //Use of promises 
     var deffered = $q.defer(); 
     $http.post('ajax_get_finish/' + id, {id: 'cat_id'}) 
     .then(function(success) { 
      deferred.resolve(success.data); 
     }, function(error) { 
      deferred.reject(error); 
     }); 

     return deferred.promise; 
    } 

    function getCityDetails(id) { 
     //Use of promises 
     var deffered = $q.defer(); 
     $http.post('ajax_get_size/' + id, {id: 'st_id'}) 
     .then(function(success) { 
      deferred.resolve(success.data); 
     }, function(error) { 
      deferred.reject(error); 
     }); 

     return deferred.promise; 
    } 
}); 

次に、あなたのコントローラにデータをロードし、それを表示するように結合双方向を使用しています。