Question

我为公司会计构建了一个应用程序。我列出了一个帐户的所有操作，来自json和ng-repeat。 Ng-repeat工作很好，但问题是：

我希望按操作名称添加过滤器输入。过滤器不起作用，经过大量搜索，我不明白为什么。

我app.js的代码（角度）：

//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}">

但它不起作用！如果你能帮助我，请提前致谢！

Answer 1

您的过滤名为query.name的模型，因此也要更改ng-repeat：

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

Answer 2

我已经解决了我的问题。

过滤数据对象的解决方案如下：

  $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>

感谢所有人的帮助，我认为其他人可以解决这个问题，他们可以在这里找到解决方案。

角度ng-repeat：过滤器在symfony twig视图中不起作用

2 个答案: