0

我正在按照教程 Codepen 示例在这里对表格进行 Angularjs 搜索：

https://codepen.io/sevilayha/pen/AmFLE

假设我从服务器收到的美味数字是 255, 65551, 32322 ，其中最后两位数字应该是小数。

因此，为了以全面的方式向用户显示它们，我在 html 上做了：

{{ roll.tastiness/100 | number : 2}}

在表中：

  <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
    <td>{{ roll.name }}</td>
    <td>{{ roll.fish }}</td>
    <td>{{ roll.tastiness/100 | number : 2}}</td>

请注意，我没有修改 codepen 中的代码，因为它不是我的，但您可以在那里尝试修改。

我将控制器中的数据值（再次，不保存代码笔）更改为：

  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab', tastiness: 255 },
    { name: 'Philly', fish: 'Tuna', tastiness: 466 },
    { name: 'Tiger', fish: 'Eel', tastiness: 7 },
    { name: 'Rainbow', fish: 'Variety', tastiness: 6 }
  ];

问题是，即使数字显示为 2.55 和 4.66，在搜索中我必须输入 255 而不是 2.55 才能找到记录。

为了使搜索检测到值作为它们在页面上的显示方式而不是 $scope.sushi 对象数组中显示的值，我应该怎么做？

4

2 回答 2

0 
<td>{{ roll.tastiness/100 | number : 2}}</td>

使用 PIpe 的 Angular JS 仅修改 UI 显示值，但您的 JSON 值仍然是 255，这就是为什么它不使用 2.55 搜索的原因我认为过滤器只是提供相同的 PIPE 逻辑值，以便它可以正确搜索

于 2018-07-12T08:46:37.697 回答
0

这是因为过滤器正在过滤实际值，而管道正在转换这些值以仅用于显示。过滤器正在处理的值保持不变，没有小数位。

您可以修改搜索过滤器或修改值。这取决于您是否需要为某些其他目的保留相同的值。如果不是，我会去修改值并移除管道。

这里与所有 JS 版本兼容的最低级别的 vanilla 是简单的 for 循环：

for (var i=0; i<sushi.length; i++){
  sushi[i].tastiness = sushi[i].tastiness/100;
}

在显示之前执行。并在显示时移除管道。

于 2018-07-12T08:47:09.800 回答