angular ng-repeat:过滤器在 symfony twig 视图中不起作用

angular ng-repeat : filter doesn't work in symfony twig view

我为我的公司会计构建了一个应用程序。 我列出了一个帐户的所有操作,从 json 开始使用 ng-repeat。 Ng-repeat 很好用,但问题是:

我想按操作名称为过滤器添加输入。 滤镜没用,查了很多也没明白为什么。

我的代码 app.js (angular) :

//app.js

var app = angular.module('app', [], function($interpolateProvider){
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
});

app.controller('MainController', function ($scope, Account) {
  $scope.ops = {};

  $scope.showOps = function(account_id) {
    Account.get(account_id)
      .success(function(data){
         $scope.ops = data;
      })
      .error(function(data){
         console.log(data);
      });
   }
})

app.factory('Account', function($http){
   return {
     get : function(account_id) {
        return $http.get('/api/operations/' + account_id);
    }
 }
});

我的树枝模板代码:

{% block body -%}
  <div data-ng-init="showOps({{ entity.id }});">
    <div class="account-head">
      <h1>Compte</h1>
      {{ form(delete_form) }}
    </div>
    <div class="panel-body">
      <ul class="list-group">
        <li class="list-group-item">
          <span class="account-name">{{ entity.name }}</span>
          <span class="account-actions">
            <a class="btn btn-default btn-sm" href="{{    path('account_edit', { 'id': entity.id }) }}">Editer</a>
          </span>
        </li>
      </ul>
    </div>
    <input placeholder="Search" data-ng-model="query.name" ng-disabled="isDisabled" type="text">
<div data-ng-repeat="op in ops | filter: query">
     <p><% op.type %></p>
     <p><% op.name %></p>
     <p><% op.montant %></p>
     <hr>
  </div>
</div>
{% endblock %}

这应该在输入值改变时过滤结果 (我的例子:http://chalasr.github.io/#/works) 但是当我写入输入时我没有任何反应。 我尝试了一些不同的过滤器,例如:

<div data-ng-repeat="op in ops | filter: {name: someNameInResult}">
<div data-ng-repeat="op in ops | filter: {query: query}">

但它不起作用! 如果你能帮助我,提前致谢!

您过滤的模型名为 query.name,因此也更改您的 ng-repeat:

data-ng-repeat="op in ops | filter: query.name"

我已经解决了我的问题。

像这样过滤数据对象的解决方案:

  $scope.items = {
    0: {date: new Date('12/23/2013')},
    1: {date: new Date('12/23/2011')},
    2: {date: new Date('12/23/2010')},
    3: {date: new Date('12/23/2015')}
  };

只需在您的应用中添加 angular-toArrayFilter 作为依赖项,然后使用它:

//Markup:
<div data-ng-init="showOps({{ entity.id }});">
  <div class="account-head">
    <h2>Compte: {{ entity.name }}</h2>
    {{ form(delete_form) }}
    <a class="btn btn-default btn-sm" href="{{ path('account_edit', { 'id': entity.id }) }}">Editer</a>
  </div>
  <input type="text" ng-model="query.name">
  <div ng-repeat="ops in ops | toArray | filter: query">
    <p><% ops.type %></p>
    <p><% ops.name %></p>
    <p><% ops.montant %></p>
    <hr>
  </div>
</div>

谢谢大家的帮助,我想其他人也有这个问题,他们可以在这里找到解决方案。