我正在使用Angular-bootstrap。 我使用 ng-repeat 来绑定对象数组。(请参阅下面的代码)。
当我弹出复选框时,我想显示字典值,而不是键。 知道如何做到这一点的任何想法?提前感谢您的帮助!
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>
问题是 m.Id 不是项目的索引,而是它的属性
如果这是你真正想要实现的,我会说
{{ mCtrl.dictList[$index] }}
或者创建一个范围函数,根据键从字典列表中搜索字典项
好的。字典列表格式不正确。它应该更改为
self.dicList = {'key':'value', 'key2':'value'};
即
self.dictList = { '6': 'Javascript', '8': 'Angular', '9': 'T-SQL', '11': 'Linq', '5': '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 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>