如何删除初始空白选项并选择<option>使用 ng-repeat 或 ng-options 时的值? [英] How to remove initial blank option and select <option> value when using ng-repeat or ng-options?
问题描述
角度新手.过滤通过dataservice返回的json数据，过滤通过下拉菜单完成.我想做的是组合的事情:
- 我想删除通过 Angular 返回的初始空白值；
- 我还想让它在默认情况下预先选择一个不是包含在我的数据对象中(在我的情况下，返回所有对象，通过我的 html 添加为
select option)；和 - 我希望在页面呈现.
我可以删除初始空白，但无法将其合并到我包含的选项中.
我已经研究过使用 ng-repeat 和 ng-options 执行此操作，并且可以通过 将默认值设置为我的 json 中的对象之一>ng-options，但这似乎不允许我添加数据中不存在的选项.由于我没有返回所有值的组(并且认为最好不要这样做，因为它会使我的数据文件更大)，因此将其添加为选项似乎是最好的方法.
有很多关于如何删除为 Angular 返回的空白值的线程(例如 清空下拉列表中的第一个元素和Angular JS 从选择选项中删除空白选项等).我还看到了如何通过 ng-init 预先选择一个值，但这似乎要求该值是我的数据对象的一部分，而不是通过 select option 正如我所做的那样.此外，我看到了如何通过 ng-options(例如 http://ng-learn.org/2013/11/Draw_a_select_with_default_option/) 但这似乎不允许我添加将返回所有数据对象的数据值.当我将 ng-selected='true' 添加到我的选项数据值时，它似乎在页面加载时被选中，但随后该值消失并且选择下拉列表呈现为 ng-原始 每个开发人员工具.不知道我错过了什么.
在这里工作.照原样，它具有初始空白，但您可以再次看到，当页面首次加载时，下拉列表中显示了全部显示"，但它消失了.同样，我想删除空白并选择该选项作为默认值，并将其显示在下拉列表中，以便人们知道正在渲染.
感谢您的帮助！
html:
<div><form action="">团体:<select name="groups" id="grp" ng-model="groupid" ng-change="selectGroup()"><option value="0" ng-selected="true">显示全部</option><option ng-repeat="option in groups" value="{{option.ID}}" ng-selected="$first">{{option.name}}</选项></选择></表单><div><form action="">资产:<select name="assets" id="assets" ng-model="selectedAsset"><option ng-repeat="option in assets | filter: myFilter" value="{{option.ID}}">{{option.driverName}}</option></选择></表单>
过滤器:
$scope.myFilter = function(val, i, a) {如果($scope.groupid==0){返回真；};var m = 假；var grp = angular.fromJson($scope.selectedGroup);angular.forEach(grp.members, function(v, k){if(val.vpkDeviceID == v.vpkDeviceID){m = 真；}}, m);返回 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:
<代码>{资产":[{"deviceName": "车辆 25",vpkDeviceID":352964050744425，司机姓名":迈克史密斯"},{"deviceName": "车辆 52",vpkDeviceID":352599041910352，"driverName": "John Doe"},{"deviceName": "车辆 11",vpkDeviceID":862170016156711，司机姓名":莎拉·约翰逊"},{"deviceName": "车辆 28",vpkDeviceID":862193020453528，"driverName": "Eleanor Petit"}],组":[{ID":1，名称":内罗毕"，成员":[{vpkDeviceID":352964050744425}，{vpkDeviceID":352599041910352}，{vpkDeviceID":8621700161}，6{"ID": 2, "name": "karen", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 352599041910352}]},{"ID": 3, "name": "langata", "members": [{"vpkDeviceID": 352599041910352}, {"vpkDeviceID": 862170016156711}, {"vpkDeviceID": 8621930204045}352{"ID": 4, "name": "downtown", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 862170016156711}]},{"ID": 5, "name": "westlands", "members": [{"vpkDeviceID": 862193020453528}]}]}解决方案很简单:使用 ng-options，并绑定到对象而不是 ID.将一个带有空值的选项添加到选择中，以显示您的全部显示"选项.
这是一个更新的 plunkr:http://plnkr.co/edit/E8I6D6Ti3Kzw1eukuRBQ?p=preview
关键部分:
无需使用 ng-repeat.不需要 selectGroup() 函数.不需要 ng-selected.不需要 angular.toJson().范围内不需要 groupid.
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.
这篇关于如何删除初始空白选项并选择<option>使用 ng-repeat 或 ng-options 时的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
