如何删除初始空白选项，并选择＆LT;选项＆GT;采用NG-重复或NG选项时价值？ [英] How to remove initial blank option and select <option> value when using ng-repeat or ng-options?
问题描述
角新手。通过过滤DataService的JSON数据返回，过滤器是通过下拉菜单进行。我想要做的是一个事物的组合：
- 我想删除通过角返回初始空白值;
- 我也想拥有它pre-选择默认值是不
包括在我的数据对象（在我的情况下，返回所有对象，添加为选择选项通过我的HTML）;和 - 我想有一个初始默认值时显示
呈现页面。
我可以删除初始为空，但无法得到纳入我，包括选项。
我已经看了与 NG-重复和 NG-选项操作，并可以设置默认通过 NG-期权价值在我的JSON对象之一，但这似乎并没有让我在不中的数据存在的选项添加。因为我没有一组返回的所有值（并觉得这是最好不要，因为它将使我的数据文件大得多），并补充说作为一个选项，似乎这样做的最佳方式。
有许多线程在那里如何删除空白值返回的角度（如的在下拉列表空的第一个元素，
<一href=\"http://stackoverflow.com/questions/20738953/angular-js-remove-blank-option-from-select-option\">Angular JS卸下选择选项等）的空白选项。我也看到了如何pre-选择通过 NG-INIT ，但似乎需要的价值是我的数据对象的一部分，而不是一个选项的值在加入事后通过选择选项，因为我已经做到了。此外，我看到如何pre-选择通过 NG-选择一个空的数据值（如的 http://ng-learn.org/2013/11/Draw_a_select_with_default_option/ ），但是这似乎并没有让我在数据增值其中将返回所有数据对象。当我添加 NG-选择=真正的来我的选择数据的价值，它似乎要选择的页面加载时，但随后该值消失，选择下拉菜单呈现为 NG-质朴每开发工具。不知道我错过了什么。
工作花掉这里。由于是，它最初的空白，虽然再次，你可以看到，当向下第一次加载页面，但它消失了显示所有显示在下降。同样，我想删除空白，并选择该选项为默认值，并有显示在下拉菜单让人们知道的被渲染。
感谢您的帮助！
HTML：
＆LT; DIV＆GT;
＆LT; DIV＆GT;
＆LT;形式的行动=＆GT;
组：
＆LT;选择名称=群体ID =GRPNG模型=组IDNG变化=selectGroup（）＆GT;
＆LT;期权价值=0NG-选择=真正的＆gt;显示所有的＆LT; /选项＆GT;
＆LT;选项NG重复=选项组中的价值={{option.ID}}NG选择=$第一＆GT; {{option.name}}
＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;形式的行动=＆GT;
资产：
＆LT;选择名称=资产ID =资产NG-模式=selectedAsset＆GT;
＆LT;选项NG重复=资产选项|过滤器：myfilter的值={{option.ID}}＆GT; {{option.driverName}}＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
过滤器：
$ scope.myFilter =功能（VAL，I，A）{
如果（$ scope.groupid == 0）{
返回true;
};
变种M = FALSE;
VAR GRP = angular.fromJson（$ scope.selectedGroup）;
angular.forEach（grp.members，函数（V，K）{
如果（val.vpkDeviceID == v.vpkDeviceID）{
M =真实的;
}
}，M）;
返回米;
};$ scope.selectedAsset = {};
$ scope.groupid = 0;
$ scope.selectedGroup = {};
$ scope.selectGroup =功能（）{
VAR GRP = [];
angular.forEach（$ scope.groups，功能（V，I）{
如果（$ scope.groupid == v.ID）{
$ scope.selectedGroup = V;
}
}）
}
JSON：
{
资产：
{
设备名称：汽车25
vpkDeviceID：352964050744425，
驱动程序名：迈克·史密斯
}，
{
设备名称：汽车52，
vpkDeviceID：352599041910352，
驱动程序名：李四
}，
{
设备名称：车辆11
vpkDeviceID：862170016156711，
驱动程序名：萨拉·约翰逊
}，
{
设备名称：汽车28，
vpkDeviceID：862193020453528，
驱动程序名：埃莉诺佩蒂特
}
]
组：
[
{ID：1，名：内罗毕，成员：[{vpkDeviceID：352964050744425}，{vpkDeviceID：352599041910352}，{vpkDeviceID：862170016156711}]}，
{ID：2，名：卡伦，成员：[{vpkDeviceID：352964050744425}，{vpkDeviceID：352599041910352}]}，
{ID：3，名：langata，成员：[{vpkDeviceID：352599041910352}，{vpkDeviceID：862170016156711}，{vpkDeviceID：862193020453528}]}，
{ID：4，名：闹，成员：[{vpkDeviceID：352964050744425}，{vpkDeviceID：862170016156711}]}，
{ID：5，名：华兰，成员：[{vpkDeviceID：862193020453528}]}
]
}
解决方法很简单：用NG选项，并绑定到一个对象，而不是ID。一个空白值增加一个选项来选择，以显示你的全部显示选项。
下面是一个更新的plunkr： http://plnkr.co/edit/E8I6D6Ti3Kzw1eukuRBQ？ p = preVIEW
关键部分：
＆LT;选择名称=群体ID =GRPNG模型=selectedGroupNG选项=group.name在团体组＆GT;
＆LT;期权价值=＆gt;显示所有的＆LT; /选项＆GT;
＆LT; /选择＆GT;$ scope.myFilter =功能（VAL，I，A）{
如果（！$ scope.selectedGroup）{
返回true;
}
变种M = FALSE;
VAR GRP = $ scope.selectedGroup;
angular.forEach（grp.members，函数（V，K）{
如果（val.vpkDeviceID == v.vpkDeviceID）{
M =真实的;
}
}，M）;
返回米;
};
没有必要使用NG-重复。无需使用 selectGroup（）功能。不需要NG-选择。无需 angular.toJson（）。无需使用组ID 的范围。
Angular newbie. Filtering json data returned via dataservice, and filter is done via dropdown. What i would like to do is a combination of things:
- I would like to remove the initial blank value returned via Angular;
- I would also like to have it pre-select a value by default that is not
included in my data object (in my case, returning all objects, added as a
select optionvia my html); and - I would like to have that initial default value displayed when the page is rendered.
I can remove the initial blank, but can't get that to incorporate the option I'm including.
I've looked into doing this with ng-repeat and ng-options, and can set the default value to one of the objects in my json via ng-options, but that doesn't seem to allow me to add in an option that doesn't exist in the data. Since I don't have a group that returns all values (and think it'd be best not to, since it that will make my data file much larger), adding that in as an option seemed the best way to do it.
There are many threads out there on how to remove the blank value returned for Angular (e.g. Empty first element in dropdown list and
Angular JS Remove Blank option from Select Option, etc.). I also see how to pre-select a value via ng-init, but that seems to require the value be a part of my data object, and not an option added in post-hoc via select option as I've done. Further, I see how to pre-select an empty data value via ng-options (e.g. http://ng-learn.org/2013/11/Draw_a_select_with_default_option/) but that doesn't seem to allow me to add in a data value which would return all data objects. When I add ng-selected='true' to my option data value, it appears to be selected when the page loads, but then that value disappears and the select dropdown is rendered as ng-pristine per developer tools. Not sure what I'm missing.
Working plunk here. As is, it has the initial blank, although again, you can see that "Show All" is displayed in the drop down when the page first loads but that it goes away. Again, I would like to remove the blank and select the option as the default value, and have that displayed in the dropdown so people know that's being rendered.
Thanks for any assistance!
html:
<div>
<div>
<form action="">
Group:
<select name="groups" id="grp" ng-model="groupid" ng-change="selectGroup()">
<option value="0" ng-selected="true">Show All</option>
<option ng-repeat="option in groups" value="{{option.ID}}" ng-selected="$first">{{option.name}}
</option>
</select>
</form>
</div>
<div>
<form action="">
Asset:
<select name="assets" id="assets" ng-model="selectedAsset">
<option ng-repeat="option in assets | filter: myFilter" value="{{option.ID}}">{{option.driverName}}</option>
</select>
</form>
</div>
</div>
filter:
$scope.myFilter = function(val, i, a) {
if($scope.groupid==0){
return true;
};
var m = false;
var grp = angular.fromJson($scope.selectedGroup);
angular.forEach(grp.members, function(v, k){
if(val.vpkDeviceID == v.vpkDeviceID){
m = true;
}
}, m);
return m;
};
$scope.selectedAsset = {};
$scope.groupid = 0;
$scope.selectedGroup = {};
$scope.selectGroup = function(){
var grp = [];
angular.forEach($scope.groups, function(v,i){
if($scope.groupid == v.ID){
$scope.selectedGroup = v;
}
})
}
json:
{
"assets": [
{
"deviceName": "vehicle 25",
"vpkDeviceID": 352964050744425,
"driverName": "Mike Smith"
},
{
"deviceName": "vehicle 52",
"vpkDeviceID": 352599041910352,
"driverName": "John Doe"
},
{
"deviceName": "vehicle 11",
"vpkDeviceID": 862170016156711,
"driverName": "Sarah Johnson"
},
{
"deviceName": "vehicle 28",
"vpkDeviceID": 862193020453528,
"driverName": "Eleanor Petit"
}
],
"groups":
[
{"ID": 1, "name": "nairobi", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 352599041910352}, {"vpkDeviceID": 862170016156711}]},
{"ID": 2, "name": "karen", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 352599041910352}]},
{"ID": 3, "name": "langata", "members": [{"vpkDeviceID": 352599041910352}, {"vpkDeviceID": 862170016156711}, {"vpkDeviceID": 862193020453528}]},
{"ID": 4, "name": "downtown", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 862170016156711}]},
{"ID": 5, "name": "westlands", "members": [{"vpkDeviceID": 862193020453528}]}
]
}
The solution is simple: use ng-options, and bind to an object rather than an ID. Add a single option with a blank value to the select in order to display your "Show all" option.
Here's an updated plunkr: http://plnkr.co/edit/E8I6D6Ti3Kzw1eukuRBQ?p=preview
Key parts:
<select name="groups" id="grp" ng-model="selectedGroup" ng-options="group.name for group in groups">
<option value="">Show All</option>
</select>
$scope.myFilter = function(val, i, a) {
if(!$scope.selectedGroup){
return true;
}
var m = false;
var grp = $scope.selectedGroup;
angular.forEach(grp.members, function(v, k){
if(val.vpkDeviceID == v.vpkDeviceID){
m = true;
}
}, m);
return m;
};
No need to use ng-repeat. No need for a selectGroup() function. No need for ng-selected. No need for angular.toJson(). No need for a groupid in the scope.
这篇关于如何删除初始空白选项，并选择＆LT;选项＆GT;采用NG-重复或NG选项时价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
