Question

我需要什么

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

js code

X = data['Date']             #you can use only one bracket if choose only
y = data['Ron95_RM']         #column
X = data.drop('Ron95_RM')

变量$ scope.rootEntry

的输出

数据

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);
});
 }

html代码

 {
   id: 1,
    name: "afeef",
   price: "20",
   description: "this is test page"
},
{
 id: 2,
 name: "afeef",
 price: "20",
  description: "this is test page"
}

 <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>

控制器代码

  Exception variable  rootEntry is does not exists

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

溶液

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

但我需要发出http请求以在twig文件中发送数据
我在角度js中的新内容任何建议都是最受欢迎的

角度渲染的一般方法

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

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

html代码

  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;
    });

};

}

但是在这个问题中我怎样才能通过角度js在树枝上渲染数据。

Answer 1

您必须更改角度插值标记。实际上，twig使用与angular相同的插值标记：＆＃34; {{}}＆＃34;这就是为什么你有这个错误：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>

我希望这会对你有所帮助:)。

P.S：解决$ http承诺然后使用而不是成功（不推荐使用） https://docs.angularjs.org/api/ng/service/ $ HTTP＃弃用-通知

Answer 2

对于将来有此问题的人：您可以使用{% verbatim %}。它告诉Twig不要在其中处理代码。

在下一个代码中，您将了解如何使Twig和Angular一起工作。

{{ 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 %}

https://ourcodeworld.com/articles/read/215/how-to-use-angular-js-and-twig-without-the-conflict-of-double-curly-braces中的更多信息

如何使用Angular js将Api数据渲染到Twig文件

2 个答案: