Фильтр поиска - Угловой Js внутри Twig loop

Question

Я играю вокруг Angular JS, так как кажется, что его кривая обучения крута для младшего разработчика, такого как me.I создал угловой файл и использовал этот провайдер $ interpolateProvider для работы с разметкой твигов /синтаксис.

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> 

Использование Угловая нг-повтор директивы, я могу использовать его в петля что-то вроде

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

Теперь моя проблема, данные динамически «выборка» из базы данных, и я его отображением, используя Twig для цикла

{% 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 документы, я понимаю, что для Симметричного Угловой JS выборки данных из базы данных, я должен создать службу или контроллер, который затем вызывается угловой

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

Однако я действительно путают о том, как Угловое принести URL

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

});

Этот файл doen't ничего возвращать

В простом PHP, URL-адрес в $ HTTP называется как этот

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

Где page2.php является файл, который извлекает данные из базы данных

Как использовать это в Угловом?

Update

Почти сделал это, только 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"] 

как преобразовать это в строку?

Но нг-повтор директива не работает здесь

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

Что можно исправить это? Есть ли что-то с самого контроллера симфони?

Answer 1

Ваш код почти working.The причина для нг-повтора директива не работает в

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

, потому что в вашем контроллере симфони, вы уже петлевой ваш результат, поэтому вместо того, чтобы использовать

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

Вы можете задаться вопросом, почему в вашем нг-повторить директивы я изменить код

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

Хорошо, что вы упомянули ранее, что вы ожидаете нг тонны данных, и это может быть возможно для дублей, поэтому тем самым предотвратить эту ошибку,

track by $index 

добавляют, как описано здесь

link

Answer 2

Вы смешиваете серверные переменные с интерфейсом. Обычно AngularJs использует API от сервера для извлечения данных с помощью ajax и передает его в шаблонах.

В вашем случае вы можете создать переменную в шаблоне с помощью директивы нг-инициализации, но вы должны кодировать его в 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>