基于文本输入值的 ng-options 过滤器答案

【问题标题】：ng-options filter based on text input value基于文本输入值的 ng-options 过滤器
【发布时间】：2016-11-28 02:54:15
【问题描述】：

我在基于 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>

【问题讨论】：

标签： angularjs select filter

【解决方案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>

【讨论】：

请编辑您的问题，发布您的数据结构。
"options": [{ "vm": "0000", "dm": "美国城市平均值", "disabled": false }, { "vm": "0100", "dm ": "东北城市", "禁用": false }, { "vm": "0200", "dm": "中西部城市", "禁用": false } ]
请编辑您的问题，发布 complete 结构以及 displaycodeandlabel() 函数，以便我提供很好的帮助。
$scope.checktodisplayCodenLabel = function(item,displayCode){ if(displayCode == true){ return item.vm+" "+item.dm; } 其他{ 返回 item.dm; } };