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

Question

我在玩 Angular JS，因为对于像 me.I 这样的初级开发人员来说，它的学习曲线似乎很陡峭创建 angular 文件并使用此 $interpolateProvider 提供程序以便使用树枝 markup/syntax.

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>

现在我的问题是，数据是动态 'fetch' 来自数据库的，我使用 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;
});

});

这个文件没有return任何东西

在普通的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>

Answer 2

您的代码几乎 working.The 导致 ng-repeat 指令不起作用的原因是

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

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

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

让我们重构您的 angular 控制器

<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

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

Search Filter - Angular Js inside Twig loop

symfony

twig

angularjs