Question

我正在玩Angular JS，因为对于像我这样的初级开发人员来说，它的学习曲线似乎很陡峭。我创建了角度文件并使用这个$ interpolateProvider提供程序来处理twig标记/语法。

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

  customApp.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('//');
  $interpolateProvider.endSymbol('//');
 });

  customApp.controller('customController', function($scope) {
   $scope.message = 'Ok symfony2';
 });

现在看来，这很容易

 <div ng-app="customApp" ng-controller="customController">
    <input type="text" ng-model="message" />
      // message //
 </div>

现在我希望在搜索机制中使用它，如此

 <div ng-app="customApp" ng-controller="customController">
    Search <input type="text" placeholder="search your name" ng-model="searchText" /><br />
 </div>

使用Angular ng-repeat指令，我可以在循环中使用它，比如

 <tr ng-repeat="employee in employees | filter:searchText>
   <td>//employee.name//</td>
   <td>//employee.lastname//</td>
 </tr>

现在我的问题是，数据是动态地提取＆＃39;从数据库中我使用Twig＆＃39; s循环显示它

{% for employee in employees %}
  <tr {% if loop.index is odd %}class="color"{% endif %}>
     <td>{{ employee.name }}</td>
     <td>{{ employee.lastname }}</td> 
  </tr>
{% endfor %}

如何在此处使用角度搜索过滤器？

 {% for employee in employees | filter:searchText %}
 ......

Twig在这里抱怨......

更新

随着我深入研究Symfony文档，我明白为了让Angular JS从数据库中获取数据，我必须创建一个服务或控制器，然后通过angular调用

emp.yml

emp_angular:
path: /emps-angular
defaults: { _controller: "Bundle:Emp:emp_angular" }

控制器

public function emp_angularAction(Request $request)
{
    $names= array();
    //$em = $this->getDoctrine()->getManager();

    //$datas = $em->getRepository('Bundle:Voters')->getAllVotersDesc();

    $datas = array('manila','quezon','pasig','makatis');temp data for testing
   // dump($data);

   foreach ($datas as $data)
    {
        $names[] = $data;
    }

    $response = new JsonResponse();
    $response->setData($names);
     return $response;
   // return $this->render('Bundle:Emp:data.html.twig', array(
      //  'names' => $response,
    //));
}

有了这个，我可以成功地提取数据

["manila","quezon","pasig","makatis"]

但是我真的很困惑Angular如何获取网址

customApp.controller('customController', function($scope,$http) {
$scope.message = 'Ok symfony2';
$http({method:'GET',url:'{{ path('emp_angular')}}'}).success( function(response){
    $scope.names = response;
});

}）;

此文件不会返回任何内容

在普通的php中，$ http中的url就像这样调用

$http({method:'GET', url:'page2.php'}).success(function(response){
$scope.names = response;

其中page2.php是从数据库中检索数据的文件

如何在Angular中使用它？

更新

几乎做到了，只有1个问题..

我在这里重构我的代码

视图

{% extends '::base.html.twig' %}

{% block body -%}

<div ng-app="myApp" ng-controller="customersCtrl">
 //names //
<table ng-model="names">
  <tr ng-repeat="x in names">
    <td>//x.id//</td>
    <td>//x.name//</td>
  </tr>
</table>

{% endblock %}

{% block javascripts %}
 {{ parent() }}
  <script src="//code.angularjs.org/1.4.8/angular.js"></script>
  <script>
    var app = angular.module('myApp', []);

    app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
    });

    app.controller('customersCtrl', function($scope, $http) {
        //$http.get("http://localhost:8093/voters/voters_angular")
        $http.get("{{ path('emp_angular') }}")
        .success(function (data,status, headers, config) {$scope.names = data;});
    });
    //console.log(names);
 </script>  
 {% endblock %}

此

的路径文件

 emp_angular:
  path: /voters-angular
  defaults: { _controller: "Bundle:Voters:voters_angular" }

 angular:
  path: /angular
  defaults: { _controller: "Bundle:Voters:angular" }

重构控制器

  public function voters_angularAction(Request $request)
{
    $names = array();


    $em = $this->getDoctrine()->getManager();

    $entities = $em->getRepository('Bundle:City')->createQueryBuilder('c')
       ->orderBy('c.name', 'ASC')
       ->getQuery()
       ->getResult();

    foreach ($entities as $entity)
    {
        $names[] = $entity->getName();
    }

    $response = new JsonResponse();
    $response->setData($names);

    return $response;
}

public function angularAction(Request $request)
{
    return $this->render('Bundle:Voters:data.html.twig');
}

在树枝上

 // names //

成功显示数据

 ["Aborlan ","Abra de Ilog ","Abucay ","Abulug ","Abuyog ","Adams"]

如何将其转换为字符串？

但是ng-repeat指令在这里不起作用

<tr ng-repeat="x in names">
<td>//x.id//</td>
<td>//x.name//</td>
</tr>

可能解决的问题是什么？symfony控制器本身有什么问题吗？

Answer 1

您正在将服务器端变量与前端混合使用。通常AngularJs使用来自服务器的API来通过ajax获取数据并将其传递给模板。

在你的情况下，你可以通过ng-init指令在模板中创建变量，但你应该先在json中对它进行编码：

有你的例子：

{% set employees = [{'name':'One'},{'name':'Two'}] %}

<div ng-app="EmployeeApp">
    <div ng-controller="EmployeeListCtrl" ng-init='employees={{ employees|json_encode|raw }}'>
        <ul ng-repeat="employee in employees | filter: searchText">
            <li>//employee.name//</li>
        </ul>
    </div>
</div>

搜索过滤器 - Twig循环内的角度Js

1 个答案: