$ http .then()后无法追加

时间:2018-05-01 05:49:35

标签: javascript jquery html angularjs

您好我正在使用angular js $ http来获取json数据

json数据

  {"Data":["index":[{"Name":"append_here_1"},{"Name":"append_here_2"}]]}

App.js

var app=Angular.module('app',[]);

Request.js

app.service('Request_service', function() {
      this.get_json=function(){
        return $http.post('http://...', {
            params_1: "123",
            params_2: "abc"
        }).then(function success(e) {
          return e.data;
        },function fail(e){
          return false;
        });
       }
});

Controller.js

$scope.index_data=[];
app.controller('myCtrl', function($scope, Request_service) {
Request_service.get_json().then(function(data)
     $scope.index_data=data.Data[0].index;  

     for(var i=1;i<3;i++){ 
                         var id_data="#append_here_"+i;
                        $(id_data).append('<input value="'+i+'">');                                                                                            

                     }
                );
}); 

template.html

<body ng-app="app">
   <div ng-controller="myCtrl">
      <div ng-repeat="obj in index_data ">

        // {{index_data.Name}}  = append_here_1
        <div id="{{index_data.Name}}">

         </div>

      <div> 

    

问题是当控制器加载它没有附加的数据时

 <div id="append_data_1">
 </div>

 <div id="append_data_2">
 </div>

应该是什么样子

  <div id="append_data_1">
  <input value="1">
  <input value="2">
  </div>      

  <div id="append_data_2">
  <input value="1">
  <input value="2">
  </div>

如果有人能改进此代码,我们将不胜感激

提前谢谢

1 个答案:

答案 0 :(得分:0)

修改此功能声明

function get_json () {
  var deferred = $q.defer();
  $http.post('http://...', { 
        params_1: "123",
        params_2: "abc"
   })
    .success(function (result) {
      deferred.resolve(result.data);
    })
    .error(function (error) {
      deferred.reject(error);
    });

  return deferred.promise;
}

修改你的HTML代码

<div ng-repeat="obj in index_data ">

    // {{obj.Name}}  = append_here_1
    <div id="{{obj.Name}}">
        {{obj.Name}}
    </div>

<div>