Question

我在基于Angular的HTML中有一个选择下拉列表，如下所示。要求是根据用户在文本输入框中输入的文本过滤下拉值。此选择中的下拉值为op 如何添加过滤器。

<select class="form-control" size="12" data-ng-model="selItem.SelectedItems"
ng-options="option as displaycodeandlabel(option,selItem.isCodeonLabel)disable when option.disabled==true for option in ::a.sData"></select>

Answer 1

不确定您的data结构，但通常您只能使用原生filter。

这是工作演示：

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.a = {};
    $scope.a.sData = [  
       {  
          "vm":"0000",
          "dm":"U.S. city average",
          "disabled":false
       },
       {  
          "vm":"0100",
          "dm":"Northeast urban",
          "disabled":false
       },
       {  
          "vm":"0200",
          "dm":"Midwest urban",
          "disabled":false
       }
    ];

    $scope.displayCodeandLabel = function(item, displayCode) {
      return displayCode ? item.vm + " " + item.dm : item.dm;      
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <div class="col-md-12">
    <label for="search">Search</label>
    <input type="text" id="search" class="form-control" placeholder="Search" ng-model="search">
    <hr>
    <select class="form-control" size="12" data-ng-model="selItem.SelectedItems" ng-options="option as displayCodeandLabel(option, selItem.isCodeonLabel) 
disable when option.disabled == true for option in a.sData | filter: search"></select>
    </div>
</body>

</html>

ng-options基于文本输入值过滤

1 个答案: