javascript - 如何在 View 中使用 $ 等符号或 V、Amp 等单位格式化属性值的对象属性上使用 Angular 过滤器搜索？

Question

我有一个包含模型的对象数组，其中模型属性的值在 View 中使用货币符号和单位(如卢比、V、安培)进行格式化。

var app = angular
  .module('myApp', [])
  .controller('SearchListController', [
    '$scope',
    function($scope) {
      $scope.models = [];

      for (var i = 0; i < 10; i++) {
        var model = {
          name: 'Model ' + (i + 1),
          voltage: (i + 1) * 10,
          current: (i + 1) * 20,
          price: (i + 1) * 30.12
        };

        $scope.models.push(model);
      }


    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="SearchListController">

    <input type="text" name="searchModel" ng-model="searchModel" style="width: 80%">
    <div ng-repeat="model in models | filter: searchModel">
      <div>{{$index+1}}. {{model.name}}, {{model.voltage}} V, {{model.current}} Amp, {{model.price | currency : 'Rs.'}}
      </div>
    </div>
  </div>

</div>

由于 Angular 过滤器适用于对象属性，因此在搜索中添加单位或货币符号不会过滤列表。如何搜索 10 V 或 Rs.30 等型号列表？

一种方法是添加附加属性，例如数据库索引功能，它是所有格式化属性值的串联。但我正在显示此模型列表，其中可以选择一个模型。在这种情况下，我必须复制所选模型，删除此附加属性，然后使用它。

请告诉我是否有一些 Angular 方法可以解决这个问题。

Answer 1

您可以按照我在下面提到的方式连接模型本身中的值单位。

var model = {
      name: 'Model ' + (i + 1),
      voltage: (i + 1) * 10 +'V',
      current: (i + 1) * 20 +'Amp',
      price: 'Rs.'+(i + 1) * 30.12 
    };

从模板中删除您的单位。

      <div>{{$index+1}}. {{model.name}}, {{model.voltage}}, {{model.current}}, {{model.price}}        
</div>