如何设置角度 UI 选择的默认值
how to set a default value for angular ui-select
问题:
如何将默认值设置为角度 UI 选择
下拉值是从对象中获取的,对象不会有默认值。
和 ui-select 应该在前端中设置默认值。
例如:
下拉值如下
1 - 所有水果 2 -苹果3 -香蕉4-西瓜
从 2 到 4 的值派生自服务器发送的对象,但前端需要设置默认值,即 1 - 所有水果
参考下面通过 ui-select2 设置的示例,如何在 ui-select 中迁移它?
<select ng-model="fID" class="select" ui-select2 data-placeholder="select fruit">
<option value="">All fruits</option>
<option ng-repeat="f in frits value="{{f.fID}}">{{f.name}}</option>
</select>
<ui-select theme="select2" ng-model="fruits.selected">
<ui-select-match placeholder="select please" allow-clear="false"> {{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="f in fruits | filter:$select.search">
<div ng-bind-html="f.name | highlight: $select.search:'underline'"></div>
</ui-select-choices>
</ui-select>
http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=previewhttps://github.com/angular-ui/ui-select友情链接:角度-ui/ui-select
您没有对选项值使用 id 或类似的东西,因此 ui-select 比较对象地址以了解它是否被选中。
var p1 = { name: 'Adam', email: 'adam@email.com', age: 10 };
$scope.person = {selected: p1};
$scope.people = [
p1,
{ name: 'Amalie', email: 'amalie@email.com', age: 12 },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30 },
{ name: 'Samantha', email: 'samantha@email.com', age: 31 },
{ name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
{ name: 'Natasha', email: 'natasha@email.com', age: 54 },
{ name: 'Nicole', email: 'nicole@email.com', age: 43 },
{ name: 'Adrian', email: 'adrian@email.com', age: 21 }
];
像这样更改 plunker,您将拥有一个默认的选定值。
要在视图上设置默认值,您可以使用 ng-init 并将第一个对象设置为选定对象
在控制器中添加以下代码:
$scope.fruits.selected = {name: 'All fruits'};
以上会将默认的选定值设置为下拉列表。
我找到了这个工作示例:http://jsfiddle.net/NfPcH/28/
角度代码:
<a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
控制器:
app.controller('Ctrl', function($scope, $filter) {
$scope.user = {
status: 2
};
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
$scope.showStatus = function() {
var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
};
});
相关文章:
- Angularjs:如何让ui选择只有一种方式的模型竞标
- 初始化ng模型时,Angular ui选择占位符不起作用
- 角度ui选择标记模糊时丢失文本输入
- AngularJS和UI-选择多个数据
- 角度:ui选择.具有“刷新”功能的自定义标记
- jquery ui选择菜单滚动条不工作
- jQuery UI选择菜单没有't接受百分比宽度
- 角度 1.2 升级后的角度 UI 选择下拉值问题
- 使用 jQuery UI 选择菜单中选择中的隐藏/显示选项
- ui选择未知提供程序
- 如何在 jquery 中删除 UI 选择菜单
- 如何在UI选择菜单中为每个选项指定选择功能
- 角度 UI 选择不呈现输入字段
- 如何设置角度 UI 选择的默认值
- 有没有办法在角度UI选择的下拉列表中的第n项之后创建分隔符
- 在 ui 选择中添加/删除焦点
- 在 IE8 中 UI 选择不呈现选择选项
- 角度 ui 选择占位符不起作用
- 使用日期时间选择器 UI 选择在日期时间之后使用什么方法触发事件
- 对象数组上的角度 ui 选择标记