如何打印Json结果以在角度js中查看

时间:2015-05-14 13:11:25

标签: javascript php jquery json angularjs

您好我是角度js的新手,我需要一些帮助,我在角js中有一个编辑表单当用户点击编辑它重定向到编辑表单但我得到一些问题,我的json结果看起来像:

    [{"0":"3",
      "1":"The only people for me are the mad ones",
      "2":"“The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.”",
      "3":"2015-05-08 13:01:58",
      "id":"3","title":"The only people for me are the mad ones",
      "description":"“The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.”",
      "created_on":"2015-05-08 13:01:58"
}]

我想知道如何打印我的标题,视图中的描述。

这是我的控制器文件:我从数据库中获取数据:

 var myApp = angular.module("blogapp",[]);

  myApp.config(['$routeProvider',function($routeProvider){

    $routeProvider
      .when('/home',{
        templateUrl:'home.html',
        controller:'blogcontroller'
      })
      .when('/list',{
        templateUrl:'list.html',
        controller:'blogcontroller'

      })
      .when('/add',{

        templateUrl:'add.html',
        controller:'addcontroller'
      })
      .when('/edit/:Blogid',{

        templateUrl:'edit.html',
        controller:'editcontroller'
      })
      .otherwise({
        redirectTo:'/home'
      });

  }]);


myApp.controller('blogcontroller',function ($scope,$http){

    $http({method: 'GET' , url: 'getallblog.php'}).success(function(data){
      $scope.allblog = data;

      console.log(data);
    });

// DELETE blog HERE 
 $scope.removeRow= function(id){



    $http.post("removeblog.php",{'id' : id}).success(function(data,status,headers,config){
      window.location='index.html';
      console.log("Deleted Successfully");

  });
  };

// delete blog code ends here


  });


myApp.controller('addcontroller',function ($scope,$http){





  /// New Post Here
    $scope.new_post =function(){



    $http.post("addblog.php" ,{'title' : $scope.title ,'description' : $scope.description }).success(function(data,status,headers,config){
      window.location='index.html';
      console.log("inserted Successfully");
    });
  };



  // New Post ends Here

});

myApp.controller('editcontroller',function ($scope,$http,$routeParams){

     $scope.Blogid = $routeParams.Blogid;

     $http.post("getblog.php",{'id' : $scope.Blogid}).success(function(data){
      $scope.editit = data;  /// here i get the resuly  want to pass it t view

      console.log(data);

  });


});

我的编辑html表单:edit.html

    <!-- Page Content -->
    <div class="container">

        <div class="row">

            <!-- Blog Entries Column -->
            <div class="col-md-6">

                <h1 class="page-header">
                   Angular Blog 

                </h1>


               <div >

        <form class="form-signin">


        <h2 class="form-signin-heading">Modify // want to print title here </h2>
        <div class="row">
        <div class="col-md-12">
        <label for="posttitle" class="sr-only">Email address</label>
        <input type="text" id="posttitle" class="form-control" ng-model="{{title}}"  required="" value=""><br>
        <span>Title : // want to print title here</span>
        </div>
        </div>
        <br>
        <div class="row">
        <div class="col-md-12">
        <label for="postdetails" class="sr-only">Password</label>
        <textarea id="postdetails" class="form-control" ng-model="description" required=""></textarea>
        <br>
        <span>Blog Description: // want to print description here</span>
        </div>
       </div>
       <br>
       <div class="row">
       <div class="col-md-3"></div>
       <div class="col-md-6">
        <button class="btn btn-lg btn-primary btn-block" type="button" ng-click="edit_post()" name="editblog">Modify Now</button>
        </div>
              <div class="col-md-3"></div>
        </div>

      </form>

      </div>

            </div>
             <div class="col-md-2"></div>
            <!-- Blog Sidebar Widgets Column -->
             <div ng-include="'includes/sidebar.html'">                    
</div>

        </div>
        <!-- /.row -->



    </div>
    <!-- /.container -->

2 个答案:

答案 0 :(得分:0)

这样的事情:

        <span>Blog Description: {{allblog.description}}</span>

或者

<span>Blog Description: <span ng-bind-html ="allblog.description"></span></span>

如果你的allblog是一个数组,请使用allblog [0]

答案 1 :(得分:0)

要打印标题,首先需要在JS中替换这一行:

  $scope.allblog = data;

  $scope.allblog = data[0];

现在,您可以使用以下语句编写HTML:

{{allblog.title}}