如何使用angular js中的ng-option删除下拉列表中的空值? [英] How to remove empty values in drop down using ng-option in angular js?

问题描述

• 如何在 angular js 中使用 ng-option 删除 Drop Down 中的空值和空白值?
• 有些数据在 college name 中，有些数据没有 college name 所以下拉列表中发生了什么，显示的是空值.

• 我只需要值，而不是空的空白项，那么如何删除空项.

• 我的Plunker.

• 以及如何将Mingle College Name 和School Name 合并为一个Drop Down.

我的下拉菜单:-

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" 占位符="搜索"需要><option value="">All</option></select><label for="">学校名称</label><select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>

我的 Html:-

<label for="">学院名称</label><select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></选择><label for="">学校名称</label><select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></选择><div ng-repeat="用户中的问题 | filter: searchtable | filter: myrole"><小><表格边框=0"><th>{{question.displayName}}</th><th style="background: yellow;">,{{question.roles[0]}}</th><th style="background: light;">,{{question.request_role[0]}}</th></tbody></小>
<p>如何将大学名称和学校名称混合到一个下拉列表中:-</p><p>以及如何在选择文件时过滤学院名称和学校名称</p>

我的数据:-

 $scope.users = [{"_id": "59a6c7c96c2ce324124cc1d8","displayName": "闪烁基础","提供者": "本地","location": "icf","用户名": "闪烁","dob": "1991-10-04T18:30:00.000Z",电话":7299345250，"religion": "印度教","college_name": "Arignar Anna","__v": 2,"创建": "2017-08-30T14:12:25.397Z",角色":[堵塞"],请求角色":[变更代理"],"lastName": "基金会",名字":闪烁"},{"_id": "598abfe4cce8ed582a2d8b32","displayName": "avinaash muthukumar","提供者": "本地","username": "avinaash muthu","__v": 0,"创建": "2017-08-09T07:55:16.511Z",角色":[行政"],"request_role": ["更改代理"],名字":阿维纳什"},{"_id": "5979a591c999e9302caece13","displayName": "Ajmal Afthab","提供者": "本地","location": "Urapakkam","用户名": "ajmal_afthab","dob": "1995-01-23T18:30:00.000Z",电话":9500269131，"religion": "伊斯兰教","school_name": "公立学校","__v": 1,角色":[kp"],"request_role": ["学校学生"],类别":[《宗教与文化》，《道德经》，社会心理学"],"lastName": "Afthab",名字":阿杰马尔"},{"_id": "5978a2886d5b10ec321a2114","displayName": "快乐的塞尔瓦姆","提供者": "本地","用户名": "快乐","__v": 0,"创建": "2017-07-26T14:09:12.730Z",角色":[行政"],请求角色":[父母"]，类别":[]，"lastName": "塞尔瓦姆",名字":快乐"},{"_id": "58e73c5c9e2f3f1421e241be","displayName": "sarawana kumar","religion": "印度教","college_name": "IIT","__v": 2,角色":[用户"],"request_role": ["学校学生"],类别":[《宗教与文化》，社会心理学"],"lastName": "库马尔",名字":砂拉越"},{"_id": "58d0fab62758cc482c295eba","displayName": "avinaash kumaran","提供者": "本地","username": "avinaash",角色":[堵塞"],请求角色":[父母"]，类别":[]，"lastName": "库马兰",名字":阿维纳什"},]

解决方案

您可以使用过滤器(或编写自定义过滤器)来删除第一个案例的空白选项.

HTML:

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users | filter:{ university_name :'!!'}" class="form-control" placeholder="search" required><option value="">All</option></选择><label for="">学校名称</label><select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users | filter:{ school_name :'!!'}" class="表单控件"占位符=搜索"需要><option value="">All</option></选择>

现在对于您的第二种情况，如果您想将学校和大学合并到一个下拉列表中，只需添加以下内容.使用自定义过滤器返回非空值.

HTML

<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.college_name +''+ item.school_name for item in users|filter:notBlank" 类="form-control" placeholder="search" required><option value="">All</option></select>

JS:

 $scope.notBlank= function(item){return (item.college_name || item.school_name)}

工作Plunker:http://plnkr.co/edit/QF5rnghuIWfcdeQdbAvd?p=preview

• How to remove empty and blank values in the Drop Down using ng-option in angular js?
• Some data's are in college name some of it not having the college name so what is happening in the drop down, the empty values are displaying.

• I am expecting only values, not empty blank items, so how to remove empty items.

• My Plunker.

• And how to Mingle College Name and School Name into a single Drop Down.

My Drop Down:-

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>

  <label for="">school name</label>
       <select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>

My Html:-

<div class="col-md-3">
    <label for="">College name</label>
    <select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required>
        <option value="">All</option>
    </select>
    <label for="">school name</label>
    <select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required>
        <option value="">All</option>
    </select>
    <div ng-repeat="question in users | filter: searchtable | filter: myrole"> <small>
                  <table border="0">
                    <tbody>
                      <th>{{question.displayName}}</th>
                    <th style="background: yellow;">,{{question.roles[0]}}</th>
                    <th style="background: light;">,{{question.request_role[0]}}</th>

                    </tbody>
                          </table>


                  </small> </div>
    <p>How to mingle college name and school name into single drop down:-</p>
    <p>And how to do filter college name and school name while selecting the filed</p>
</div>

My Data:-

    $scope.users = [{
"_id": "59a6c7c96c2ce324124cc1d8",
"displayName": "blink foundation",
"provider": "local",
"location": "icf",
"username": "blink",
"dob": "1991-10-04T18:30:00.000Z",
"phone": 7299345250,
"religion": "Hindu",
"college_name": "Arignar Anna",
"__v": 2,
"created": "2017-08-30T14:12:25.397Z",
"roles": [
"block"
],
"request_role": [
"Change Agent"
],
"lastName": "foundation",
"firstName": "blink"
},
{
"_id": "598abfe4cce8ed582a2d8b32",
"displayName": "avinaash muthukumar",
"provider": "local",
"username": "avinaash muthu",
"__v": 0,
"created": "2017-08-09T07:55:16.511Z",
"roles": [
"admin"
],
"request_role": ["Change Agent"],
"firstName": "avinaash"
},
{
"_id": "5979a591c999e9302caece13",
"displayName": "Ajmal Afthab",
"provider": "local",
"location": "Urapakkam",
"username": "ajmal_afthab",
"dob": "1995-01-23T18:30:00.000Z",
"phone": 9500269131,
"religion": "Islam",
"school_name": "public school",
"__v": 1,
"roles": [
"kp"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Moral Ethics",
"Social Psychology"
],
"lastName": "Afthab",
"firstName": "Ajmal"
},
{
"_id": "5978a2886d5b10ec321a2114",
"displayName": "happy selvam",
"provider": "local",
"username": "happy",
"__v": 0,
"created": "2017-07-26T14:09:12.730Z",
"roles": [
"admin"
],
"request_role": ["parent"],
"categories": [],
"lastName": "selvam",
"firstName": "happy"
},
{
"_id": "58e73c5c9e2f3f1421e241be",
"displayName": "sarawana kumar",
"religion": "hindu",
"college_name": "IIT",
"__v": 2,
"roles": [
"user"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
},
{
"_id": "58d0fab62758cc482c295eba",
"displayName": "avinaash kumaran",
"provider": "local",
"username": "avinaash",
"roles": [
"block"
],
"request_role": ["parent"],
"categories": [],
"lastName": "kumaran",
"firstName": "avinaash"
},
    ]

解决方案

You can use a filter (or write a custom filter) to remove the blank options for your first case.

HTML:

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users | filter:{ college_name :'!!'}" class="form-control" placeholder="search" required>
    <option value="">All</option>
</select>
<label for="">school name</label>
<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users | filter:{ school_name :'!!'}" class="form-control" placeholder="search" required>
    <option value="">All</option>
</select>

Now for your second case, if you want to combine both school and colleges into one dropdown, just add the following. Use a custom filter to return non empty values.

HTML

<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.college_name +''+ item.school_name for item in users|filter:notBlank" class="form-control" placeholder="search" required><option value="">All</option></select>

JS:

 $scope.notBlank= function(item){
   return (item.college_name || item.school_name)
} 

Working Plunker: http://plnkr.co/edit/QF5rnghuIWfcdeQdbAvd?p=preview

这篇关于如何使用angular js中的ng-option删除下拉列表中的空值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！