Question

我正在按照Codepen教程示例在表上进行Angularjs搜索：

比方说，我从服务器接收到的品酒号码是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中的代码，因为它不是我的，但是您可以在那里尝试修改。

然后我将控制器中的数据值更改了（同样，没有保存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对象数组中显示的值？

Answer 1

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

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

Answer 2

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

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

与所有JS版本兼容的最低级别的香草对于循环很简单：

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

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

AngularJS通过显示值而不是接收的数据/ json值进行搜索？

2 个答案: