代码之家 › 专栏 › 技术社区 › Asim

基于下拉列表的搜索条件-AngularJS过滤器

angularjs javascript

Asim · 技术社区 · 7 年前

我有个问题 filter 搜索示例名称。这很容易在ng repeat上实现。

我的问题是,我想根据 name 或 account_name (两个不同的实体)。

我尝试的是使我的输入框在两个 名称 和 帐户\u名称 但没有成功。我所做的是:

<input type="text" placeholder="Search" ng-model="searchName.name">

<md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100" ng-show="(account|filter:searchName).length > 0"
             ng-repeat="account in containers | groupBy: 'accountId' track by $index | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name">

 <md-toolbar>
            <div class="md-toolbar-tools" ng-repeat="container in account | limitTo: 1">
                <h1 class="md-display-3"> <a href="{{container.tagManagerUrl}}">{{container.account_name}}</a></h1>
            </div>
        </md-toolbar>

(.... some code that is not important)

//table start
 <tr ng-repeat="container in account | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name">

所以我有:
1) 输入字段(搜索框)
2) <md-card> 用于 ng-repeat
3) <md-toolbar> 与md卡关联,但我必须在此处运行ng repeat
4) 显示条目的带有ng repeat的表格。

这是我尝试的路线:

filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name

但我不能在输入字段中声明like ng-model="searchName.name && searchName.account_name" 这会引发错误

这个 解决方案 我想尝试是有一个下拉菜单,我可以选择过滤 名称 或 帐户\u名称 看起来像这样:

如果可以通过account\u name和name在just inputfield中进行搜索,如果不这样做,那就太好了。希望你能帮助我前进,并指导我需要什么以及如何做(不需要你做所有的工作)。

谢谢

1 回复 | 直到 7 年前

NTP 7 年前

可以按account\u name和name进行搜索,您可以将对象传递给过滤器。

<input type="text" placeholder="Search" ng-model="search.name">
<input type="text" placeholder="Search" ng-model="search.account_name">
<tr ng-repeat="container in account | filter:{name: search.name, account_name: search.account_name}>
</tr>

您也可以对此使用自定义筛选器,

js公司

  $scope.customFilter = function(row){   
    if($scope.Search == undefined || $scope.Search == "")
      return true;
    else if(row.name.indexOf($scope.Search) !== -1 || row. account_name.indexOf($scope.Search) !== -1)
      return true;
    else 
      return false;
  }

html

<tr ng-repeat="container in account | filter:customFilter>
</tr>

Demo

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前