Заполните угловой пользовательский интерфейс

3

Как вы заполняете загрузку angular ui bootstrap? Я хочу заполнить popover списком имен актеров. Вот код:

<div class="container" ng-if="radioModel=='Search for Actor'">
    <p>Movies played in:</p>
      <table class="table table-bordered">
        <tr ng-repeat="name in listOfMovies">
        <td>
        <p>
          <button uib-popover="populateWithListOfData" popover-trigger="mouseenter" type="button" class="btn btn-default"> {{ name }}</button>
        </p>   
       </td>
       </tr>
     </table>
 </div>

Я хочу иметь возможность заполнить этот popover для каждого имени ng-repeat. Таким образом, я получу название фильма и, основываясь на этом имени, хочу заполнить popover списком участников в этом фильме. Спасибо, ребята.

  • 0
    Так что не работает?
  • 0
    Где это говорит uib-popover = "populateWithListOfData" Я не знаю, как заполнить поповер. Я просто поместил populateWithListOfData в качестве заполнителя.
Показать ещё 4 комментария
Теги:
angular-ui-bootstrap
bootstrap-popover

2 ответа

1
Лучший ответ

Это определенно возможно. Я установил элемент данных, названный друзьями в JS

$scope.friends = [
    {name:'John'},
    {name:'Jessie'},
    {name:'Johanna'},
    {name:'Joy'}
      ];

Кроме того, был создан массив для текста во всплывающем окне

$scope.toolTip =['D','A','C','T'];

Если вы хотите отобразить всплывающее окно для каждой строки.

Я создал ng-repeat и соответствующее popover. Чтобы отобразить все буквы в первом popover.

<div ng-repeat="f in friends">
{{f.name}}
<button  uib-tooltip="{{toolTip[$index]}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
</div>

Ниже приведена рабочая демонстрация

Как это работает?

Значение подсказки для вашего инструмента установлено как uib-tooltip="{{toolTip[$index]}}".it получает доступ к каждому элементу в соответствии с индексом $, полученным из ng-repeat.

Если вы хотите отобразить все данные в первом всплывающем окне

Я создал ng-repeat и соответствующее popover. Чтобы отобразить все буквы в первом popover.

   <div ng-repeat="f in friends">
   <div ng-if="$index==0">
   <button  uib-tooltip="{{toolTip}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
</div>
   {{f.name}}
   </div>

Ниже приведена рабочая демонстрация

Как это работает?

Значение подсказки вашего инструмента установлено как uib-tooltip="{{toolTip}}". Оно вводит ng-if, если условие выполнено и, таким образом, печатает массив.

Поделиться
  • 0
    Но посмотрите на демо, каждая буква находится в другом поповере. Что мне нужно, так это все буквы, отображаемые в первом поповере.
  • 0
    Это тоже довольно просто. Как выглядит ваш список данных?
Показать ещё 3 комментария
1

Я не могу проверить, работает ли это, но это может дать вам эту идею.

(function ()
{
    function moviePopover($compile)
    {
        return {
            restrict: "EA",
            scope: true,
            templateUrl: '<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>',
            link: function (scope, element, attrs)
            {
                scope.dynamicPopover = {
                    content: "Movies",
                    templateUrl: "myPopoverTemplate.html",
                    title: "Title"
                };

                if (attrs.movieName !== undefined)
                {
                    scope.movieList = getMoviesByName(attrs.movieName);
                    $compile(element)(scope);
                    //If 1st leads to infinit loop use this
                    //                    $compile(element.contents())(scope);
                }

                function getMoviesByName(movieName)
                {
                    //return all moviews based on movieName
                    //here im just returning dummy array(you return your data)
                    return ["Movie1", "Movie2"];
                }
            }
        }
    }

    angular.module("myApp").directive("moviePopover", ["$compile", moviePopover]);


}());

<script type="text/ng-template" id="myPopoverTemplate.html">
  <ul>
        <li ng-repeat="movie in movieList">{{movie}}</li>
  </ul>
</script>


<div class="container" ng-if="radioModel=='Search for Actor'">
    <p>Movies played in:</p>
      <table class="table table-bordered">
        <tr ng-repeat="name in listOfMovies">
        <td>
        <p>
          <movie-popover movie-name="{{name}}"></movie-popover>
        </p>   
       </td>
       </tr>
     </table>
 </div>
Поделиться
  • 0
    Спасибо за ваш ответ. Я думаю, что это поможет мне и в будущем.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню