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

Question

我正在使用 Angular JS，因为对于像我这样的初级开发人员来说，它的学习曲线似乎很陡峭。我创建了 angular 文件并使用这个 $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>

现在我的问题是，数据是从数据库中动态“获取”的，我使用 Twig 的 for 循环显示它

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

这里如何使用 Angular 搜索过滤器？

 {% 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 如何获取 url

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

您的代码几乎可以工作了。ng-repeat 指令不起作用的原因是

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

因为在你的 symfony 控制器中，你已经循环了你的结果，所以改为使用

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

让我们重构你的角度控制器

<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 (response) {$scope.names = response;});
    });
    //console.log(names);
</script>   

现在你的观点

{% block body -%}

<div ng-app="myApp" ng-controller="customersCtrl">

 <table ng-model="names" class="table">
  <thead>
    <tr>
        <th>Full Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in names track by $index">
        <td>//x//</td> 
    </tr>
  </tbody> 
 </table>
</div>  
{% endblock %}

您可能想知道为什么在您的 ng-repeat 指令中我将您的代码更改为

  <tr ng-repeat="x in names track by $index">
        <td>//x//</td> 
  </tr>

您之前提到过您期望大量数据，并且可能存在重复，因此请防止该错误，

 track by $index

按照此处所述添加

link

Answer 2

您正在将服务器端变量与前端混合。通常 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>