Php 如何使用Angular js将Api数据呈现到细枝文件_Php_Angularjs_Json_Symfony_Twig

Php 如何使用Angular js将Api数据呈现到细枝文件

php angularjs json symfony twig

Php 如何使用Angular js将Api数据呈现到细枝文件,php,angularjs,json,symfony,twig,Php,Angularjs,Json,Symfony,Twig,我需要什么我需要在symfony2细枝文件中呈现数据有人将我的问题标记为重复，我需要使用angular js而不是symfony渲染数据 js代码 function EntryCtrl ($scope, $http) { $scope.rootEntry = []; $http.get('https://api.github.com/users/mralexgray/repos').success(function(root) { $scope.rootEntry = root;

我需要什么

我需要在symfony2细枝文件中呈现数据
有人将我的问题标记为重复，我需要使用angular js而不是symfony渲染数据

js代码

function EntryCtrl ($scope, $http) {
$scope.rootEntry = [];
$http.get('https://api.github.com/users/mralexgray/repos').success(function(root) {
    $scope.rootEntry = root;
    console.log($scope.rootEntry);
});
 }

变量$scope.rootEntry的输出

资料

html代码

 <body >
<div class="row" ng-controller="EntryCtrl">
 <---updated code -->
 # i have tried map model as well as
 <table ng-model="rootEntry">
  <div id="treeview" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <ul>
        <li ng-repeat="root in rootEntry">{{root.name}}</li>
        </ul>
   </div>
</table>
</div>

   <div ng-app="myApp">
    <div ng-controller="PeopleCtrl">
   <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
   <table>
    <tr>
    <th>Id</th>
    <th>First Name</th>
    <th>Last Name</th>
   </tr>
   <tr ng-repeat="person in people">
    <td>{{person.id}}</td>
    <td>{{person.firstName}}</td>
    <td>{{person.lastName}}</td>
   </tr>
   </table>
   </div>
   </div>

控制器代码

 public function checkAction()
 {
    $this->render('bundlename:twigfilename');
 }

错误根条目不存在
我需要在twig文件中显示json数据

解决方案

    1. it can be done through symfony2 by rendering the json data through controller

    like $this->render('bundlename:twigfilename',array('rootEntry,['jsonstring']);

但我需要发出http请求来发送细枝文件中的数据
我是新来的，任何建议都欢迎

角度渲染的一般方法

  var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
   {
    id: 1,
    firstName: "Peter",
     lastName: "Jhons"},
 {
   id: 2,
   firstName: "David",
   lastName: "Bowie"}
 ]));


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

function PeopleCtrl($scope, $http) {

  $scope.people = [];

   $scope.loadPeople = function() {
    var httpRequest = $http({
        method: 'POST',
        url: '/echo/json/',
        data: mockDataForThisTest

    }).success(function(data, status) {
        $scope.people = data;
    });

};

}

html代码

 <body >
<div class="row" ng-controller="EntryCtrl">
 <---updated code -->
 # i have tried map model as well as
 <table ng-model="rootEntry">
  <div id="treeview" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <ul>
        <li ng-repeat="root in rootEntry">{{root.name}}</li>
        </ul>
   </div>
</table>
</div>

   <div ng-app="myApp">
    <div ng-controller="PeopleCtrl">
   <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
   <table>
    <tr>
    <th>Id</th>
    <th>First Name</th>
    <th>Last Name</th>
   </tr>
   <tr ng-repeat="person in people">
    <td>{{person.id}}</td>
    <td>{{person.firstName}}</td>
    <td>{{person.lastName}}</td>
   </tr>
   </table>
   </div>
   </div>


单击此处加载数据
身份证件
名字
姓
{{person.id}
{{person.firstName}
{{person.lastName}

但在这个问题中，我如何通过角度js渲染细枝中的数据呢

您必须更改angular的插值标记。事实上，twig使用与angular相同的插值标记：“{{}}”，这就是为什么会出现错误：twig需要在symfony控制器中定义一个变量。为此，您必须配置应用程序模块：

angular.module('myApp',[]).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
}

现在，在细枝页面中使用[[]]而不是{{}：

<div ng-app="myApp">
   <div ng-controller="PeopleCtrl">
      <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
      <table>
          <tr>
              <th>Id</th>
              <th>First Name</th>
              <th>Last Name</th>
          </tr>
          <tr ng-repeat="person in people">
              <td>[[person.id]]</td>
              <td>[[person.firstName]]</td>
              <td>[[person.lastName]]</td>
          </tr>
      </table>
   </div>


单击$http#弃用通知
以后遇到此问题的人：您可以使用{%verbatim%}
。它告诉Twig不要处理里面的代码
在下一个代码中，您将了解如何使细枝和棱角一起工作
{{ max(1, 3, 2) }}  <<< The render is done by Twig
{% verbatim %}
<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  Hello {{name}} <<< The render is done by Angular
</div>
{% endverbatim %}

{{max（1,3,2）}