AngularJS过滤器真答案

【问题标题】：AngularJS filter trueAngularJS过滤器真
【发布时间】：2018-12-15 19:29:00
【问题描述】：

我正在尝试根据 accountID 进行过滤，并且我只想一次返回一条记录。我有以下代码，如果我设置过滤器：查询：true，则没有数据显示。当我将 true 添加到 ng-repeat 时会发生这种情况。当我将其设置为 true 时，为什么它不带回任何记录？这是我的代码：

<div ng-controller="LookUpCtrl as vm">
<div>
    <input type="text" id="searchText" name="searchText" ng-model="query.accountId" />
</div>
 <div ng-if="query" ng-repeat="result in vm.results | filter: query : true">
        <div class="col-lg-4"><h2>{{result.accountName}}</h2></div>
        <div class="col-lg-4"><h2>[{{result.ordernumber}}]</h2></div>
        <div class="col-lg-4">Images go here</div>
  </div> 
<div>

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

查看您的代码后，我现在可以看到为什么您的数据在按 accountId 过滤时没有出现。响应对象中的值是一个整数，文本框中用于比较的输入是一个字符串。在进行严格搜索时，这永远不会评估为真。当 accountId 值是字符串时，我能够在您的 plunker 中正确过滤它。您的数组中有一些新对象正在测试它。

{
  accountId: '3',
  ...
  name: 'Mr. This'  
},
{
  accountId: '4',
  ...
  name: 'Mr. That'
},
{
  accountId: '44',
  ...
  name: 'Mr. This'
}

这是您的 plunker 的更新链接（已更新以加载 Angular 和应用程序）。请忽略我对控制器结构的重新配置..

http://plnkr.co/edit/eZUayzldWmSEOjnkPceZ?p=preview

【讨论】：

我在我的 ng-repeat 中添加了
{{ result.accountId }}
，但它仍然是当我在过滤器中设置了 true 时，什么也不带回来。我添加正确吗？
这看起来是正确的，但是在您尝试搜索过滤之前 accountId 是否显示任何内容？我偷偷怀疑它不在您的结果对象中或名称不正确。
你能看看我的plunker吗？ plnkr.co/edit/vpqDw3q9OBHfodUFxSWu?p=catalogue
@IgnacioVillaverde 出于对您回答的尊重，我将解决您的问题。当我开始编辑时，您的答案与现在不同。我花了一段时间来更新我的编辑，因为我是在我的 iPhone 上而不是电脑上做的。完成后，我没有检查您的答案是否已更改。我喜欢我们都对代码提出了相同的问题，并且您实际上提供了一个更好的解决方案，允许不更改对象值类型。（赞成）没有复制您的答案，如果您觉得我冤枉了您，欢迎您联系版主寻求支持。

【解决方案2】：

在官方 AngularJS 文档中，有一个示例说明您应该如何使用过滤器，并解释了 comparator 是什么（在您的情况下为 true）。

这是一个带有示例的 plunker：http://plnkr.co/edit/Cv3B1j?p=preview

当您将比较器设置为true 时，如文档所述：“这本质上是对预期和实际的严格比较。” 这意味着您在搜索框中输入的内容必须完全相同作为您要过滤的对象中的字段。

如果你愿意，你可以提供一个 plunker，以便更容易重现你的错误并解决它。

编辑：

现在我明白了你的问题。这是它的一个工作 plunker：

http://plnkr.co/edit/pFd5bOmnm2nEL98TJgi5

问题是您的 ID 是数字而不是字符串。

如果您仍想将您的 id 管理为数字，您可以设置一个 number 类型的输入，它会起作用。 <input type="number" id="searchText" name="searchText" ng-model="query.accountId" />

【讨论】：

我在这里创建了一个 plunker plnkr.co/edit/vpqDw3q9OBHfodUFxSWu?p=catalogue
你的插件是空的？
对不起，我复制了一个错误的链接，现在更新了。但是您的 plunker 无法正常工作，请提供一个工作示例。

{{ result.accountId }}