如何让Angular-bootstrap弹出窗口显示字典值
[英]How do I let the Angular-bootstrap popover shows the dictionary value
问题描述
I am using Angular-bootstrap. 
我正在使用Angular-bootstrap。 I used ng-repeat to bind an array of objects. 我使用ng-repeat绑定对象数组。 (please see the code below). （请参见下面的代码）。
When I popped-over the checkbox, I would like to show the dictionary value, instead of the key. 当我弹出复选框时，我想显示字典值而不是键。 Any idea for how to do that? 关于如何做到这一点的任何想法？ Thank you for your help in advance! 提前谢谢你的帮助！
PS: I understand, that I can also set the dictionary value as part of object in the list (such as { Id: 5, checked: true, Name:'C#' }), but please forgive me that I have no control for the data returns from the source. PS：我知道，我也可以将字典值设置为列表中对象的一部分（例如{ID：5，选中：true，名称：'C＃'}），但是请原谅我无法控制数据从源返回。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="mlApp">
<head runat="server">
<title></title>
<link href="bower_components/bootstrap-css-only/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script>
angular.module('mlApp', ['ui.bootstrap'])
.controller('mlCtrl', [function () {
var self = this;
self.lists = [{ Id: 5, checked: true }, { Id: 6, checked: false }, { Id: 8, checked: true }, { Id: 9, checked: true }, { Id: 11, checked: false}];
// implement a dictionary here for the pop over to call
self.dictList = [{ key: 5, value: 'C#' }, { key: 6, value: 'Javascript' }, { key: 8, value: 'Angular' }, { key: 9, value: 'T-SQL' }, { key: 11, value: 'Linq'}];
} ]);
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="mlCtrl as mCtrl">
<ul>
<li ng-repeat="m in mCtrl.lists"><input type="checkbox" popover="{{ mCtrl.dictList[$index].value }}" popover-trigger="mouseenter" ng-model="m.checked" ng-checked="m.checked" />{{m.Id}}</li>
</ul>
</div>
</form>
</body>
</html>
2 个解决方案
解决方案1
1 2015-01-23 22:48:58
the problem is m.Id is not the index of the item, it's its property 问题是m.Id不是项目的索引，而是它的属性
if this is what you really want to achieve I would say 如果这是您真正想要实现的目标，我会说
{{ mCtrl.dictList[$index] }}
or make a scope function which searches the the dict item from the dictList based on the key 或使作用域函数根据键从dictList搜索dict项
解决方案2
0 已采纳 2015-01-24 03:18:23
Ok. 好。 The dictionary list format is incorrect. 词典列表格式不正确。 It should change to 它应该更改为
self.dicList = {'key':'value', 'key2':'value'};
ie 即
self.dictList = { '6': 'Javascript', '8': 'Angular', '9': 'T-SQL', '11': 'Linq', '5': 'C#' };
please see below: 请看下面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="mlApp">
<head runat="server">
<title></title>
<link href="bower_components/bootstrap-css-only/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script>
angular.module('mlApp', ['ui.bootstrap'])
.controller('mlCtrl', [function () {
var self = this;
self.lists = [{ 'Id': '5', 'checked': true }, { 'Id': '6', 'checked': false }, { 'Id': '8', 'checked': 'true' }, { 'Id': '9', 'checked': 'true' }, { 'Id': '11', 'checked': 'false'}];
// implement a dictionary here for the pop over to call
self.dictList = { '6': 'Javascript', '8': 'Angular', '9': 'T-SQL', '11': 'Linq', '5': 'C#' };
} ]);
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left:100px; margin-top:100px" ng-controller="mlCtrl as mCtrl">
<ul>
<li ng-repeat="m in mCtrl.lists">
<input type="checkbox" popover="{{ mCtrl.dictList[m.Id] }}" popover-trigger="mouseenter" ng-model="m.checked" ng-checked="m.checked" /> {{ m.Id }}
</li>
</ul>
</div>
</form>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.