[英]How to remove empty values in drop down using ng-option in angular js?
Drop Down
using ng-option in angular js? 如何使用角度js中的ng-option Drop Down
列表中的空值和空白值? college name
some of it not having the college name
so what is happening in the drop down, the empty values are displaying. 有些数据是college name
有些数据没有college name
所以在下拉列表中发生了什么,空值显示。 I am expecting only values, not empty blank items, so how to remove empty items. 我只期待值,而不是空的空白项,所以如何删除空项。
My Plunker . 我的Plunker 。
And how to Mingle
College Name
and School Name
into a single Drop Down
. 而如何Mingle
College Name
和School Name
到一个单一的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:- 我的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 : 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 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 : JS :
$scope.notBlank= function(item){
return (item.college_name || item.school_name)
}
Working Plunker : http://plnkr.co/edit/QF5rnghuIWfcdeQdbAvd?p=preview Working Plunker : http : //plnkr.co/edit/QF5rnghuIWfcdeQdbAvd?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.