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

问题描述

• 如何使用ng-option在角度js中删除下拉菜单中的空值和空值


• 一些数据在大学名称中，其中一些数据没有大学名称，所以下降中发生了什么显示空值。
  

• 我只希望得到值，而不是空的空白项目，所以如何删除空项目。




• My Plunker 。




• 以及如何 Mingle 学院名称和学校名称放入一个下拉菜单。

My Drop Down： -

 < select data-ng-model = searchtable.college_nameid =searchtableng-options =item.college_name as item.college_name for item in usersclass =form-controlplaceholder =searchrequired>< option value =>所有< /选项>< / SEL ECT> 
 
< label for =>学校名称< / label> 
< select data-ng-model =searchtable.school_nameid =searchtableng-options =item.school_name as item.school_name for item in usersclass =form-controlplaceholder =搜寻必需><选项值=>全部< / option>< / select> 
  

我的Html： -

 < div class =col-md-3> 
< label for =>学院名称< / label> 
< select data-ng-model =searchtable.college_nameid =searchtableng-options =item.college_name as item.college_name for item in usersclass =form-controlplaceholder =搜索必需> 
< option value =>全部< / option> 
< / select> 
< label for =>学校名称< / label> 
< select data-ng-model =searchtable.school_nameid =searchtableng-options =item.school_name as item.school_name for item in usersclass =form-controlplaceholder =搜索必需> 
< option value =>全部< / option> 
< / select> 
< div ng-repeat =用户中的问题| filter：searchtable | filter：myrole> <小> 
< 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>如何将大学名称和学校名称混合到单个下拉列表中： - < / p> 
< p>如何筛选学院名称和学校名称，同时选择存档< / p> 
< / div> 
  

我的数据：

  $ scope.users = [{
_id：59a6c7c96c2ce324124cc1d8，
displayName：blink foundation，
 provider：local，
location：icf，
username：blink，
dob：1991-10-04T18：30：00.000 Z，
电话：7299345250，
宗教：印度教，
college_name：Arignar Anna，
__v：2，
created：2017-08-30T14：12：25.397Z，
roles：[
block
]，
request_role：[ 
变更代理人
]，
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：Aj mal afthab，
provider：local，
location：Urapakkam，
username：ajmal_afthab，
dob：1995 -01-23T18：30：00.000Z，
电话：9500269131，
宗教：伊斯兰教，
school_name：公立学校，
 __v：1，
角色：[
kp
]，
request_role：[学生]，
类别 ：[
Religion&文化，
道德伦理，
社会心理学
]，
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，
 宗教：印度教，
college_name：IIT，
__v：2，
角色：[
用户
 ]，
request_role：[学生]，
类别：[
Religion&文化，
社会心理学
]，
lastName：kumar，
firstName：sarawana
}，
 {
_id：58d0fab62758cc482c295eba，
displayName：avinaash kumaran，
provider：local，
username：avinaash， 
roles：[
block
]，
request_role：[parent]，
categories：[]，
lastName：kumaran，
firstName：avinaash
}，
] 
  

解决方案

您可以使用过滤器（或编写自定义过滤器）来删除第一种情况的空白选项。
HTML ：

 < select data-ng-model = searchtable.college_nameid =searchtableng-options =item.college_name as item.college_name for item in users |过滤器：{college_name：'!!'}class =form-controlplaceholder =searchrequired> 
< option value =>全部< / option> 
< /选择> 
< label for =>学校名称< / label> 
< select data-ng-model =searchtable.school_nameid =searchtableng-options =item .school_name作为item.school_name用于用户|中的项目过滤器：{school_name：'!!'}class =form-controlplaceholder =searchrequired> 
< option value =>全部< / option> 
< /选择> 
  

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

HTML

 < select data-ng-model =searchtable.school_nameid =searchtableng-options =item.college_name +''+ item.school_name for item in users | filter：notBlankclass =form-controlplaceholder =searchrequired>< option value => All< / option>< / select> 
  

JS ：

  $ scope.notBlank = function（item）{
 return（item.college_name || item.school_name）
} 
  

工作中的佣工： 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

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