Question

我有三个下拉菜单，如国家，州，城市，它使用ajax reuest。然后我使用我的buttion添加新的下拉列表div，myfirst下拉div传递并显示的数据并且它工作正常，但是其他div的下拉数据没有通过而不显示而ajax请求可以＆＃39 ;发送。

这是我的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);
    },
    });
}

它是我的角度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 -->

Answer 1

ajax中的数据应为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);
    },
     });
}

试试

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

Answer 2

停止一起使用JQuery和AngularJS。

如果您需要数据，也可以使用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;
    }
});

然后，在控制器中加载数据，并使用双向绑定显示它。

我无法在角度js的新添加的div中调用我的ajax请求

2 个答案: