Как сделать так, чтобы всплывающее окно Angular-bootstrap отображало значение словаря

Я использую Angular-бутстрап. Я использовал ng-repeat для привязки массива объектов. (см. код ниже).

Когда я установил флажок, я хотел бы показать значение словаря вместо ключа. Есть идеи, как это сделать? Спасибо за вашу помощь заранее!

PS: я понимаю, что я также могу установить значение словаря как часть объекта в списке (например, {Id: 5, checked: true, Name: '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>

javascript angularjs twitter-bootstrap
person George Huang    schedule 23.01.2015    source источник
comment
Popover={{ mCtrl.dictList[m.Id].value }} не работает?   -  person HaukurHaf    schedule 24.01.2015
comment
{{ mCtrl.dictList[m.Id].value }} ничего не показывает...   -  person George Huang    schedule 24.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

проблема в том, что m.Id - это не индекс элемента, а его свойство

если это то, чего вы действительно хотите достичь, я бы сказал

{{ mCtrl.dictList[$index] }}

или создайте функцию области, которая ищет элемент dict из dictList на основе ключа

person Ins    schedule 23.01.2015
comment
благодарю вас. однако, если я изменю порядок объектов словаря, $index не будет работать правильно... - person George Huang; 24.01.2015
comment
это правильно, поэтому вы можете использовать функцию get - person Ins; 24.01.2015
comment
{{ mCtrl.dictList[$index].value }} получит значение.... дайте мне посмотреть, смогу ли я понять, как использовать функцию.... спасибо - person George Huang; 24.01.2015
comment
если вы используете подчеркивание, это довольно просто: self.getDict = function getDict(key) { return _.findWhere(self.dictList, {id: key}); } popover={{ mCtrl.getDict(m.Id).value }} - person Ins; 24.01.2015

arrow_upward
0
arrow_downward

Ok. Неверный формат списка словарей. Он должен измениться на

self.dicList = {'key':'value', 'key2':'value'};

ie 

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>
person George Huang    schedule 24.01.2015