如何让角度引导弹出窗口显示字典值

How do I let the Angular-bootstrap popover shows the dictionary value

本文关键字：窗口 显示 字典      更新时间：2023-09-26

我正在使用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>
相关文章：