ngRepeat 在 Bootstrap 弹出框内

Posted 2023-05-08

【中文标题】ngRepeat 在 Bootstrap 弹出框内

【英文标题】：ngRepeat Inside of Bootstrap Popover

【发布时间】：2014-08-01 22:30:14

【问题描述】：

我一直在网上搜索并绞尽脑汁，但似乎无法找到解决方案。我需要在 ng-repeat 内制作一个弹出框，其中弹出框内部也有一个 ng-repeat。

这是我到目前为止的 JSFiddle，但带有“phone.friends”的 ng-repeat 不起作用：

http://jsfiddle.net/grzesir/Lq8ve/4/

html：

<div ng-app="AngularApp">
<div class="container" ng-controller="MainController">
    <div ng-repeat="phone in phones">

        phone.name 
        <a href="javascript: void(0);" class='repeatpopover' data-popover="true" data-html=true data-content="<div ng-repeat='friend in phone.friends'>friend.name</div>">hover here</a>

    </div>
</div>

Javascript：

var angularApp = angular.module('AngularApp', []);

angularApp.controller('MainController', function ($scope) 
    $scope.phones = [
        'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.',
            'friends': [
            'name': 'John'
        , 
            'name': 'Mike'
        ]
    , 
        'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.',
            'friends': [
            'name': 'John 2'
        , 
            'name': 'Mike 2'
        ]
    , 
        'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.',
            'friends': [
            'name': 'Chris'
        , 
            'name': 'Noah'
        ]
    ];
);

$(function () 
    $(".repeatpopover").popover(
        trigger: "hover"
    );
);

【问题讨论】：

我没有答案给你，但在你得到答案之前，这可能会让你继续前进：***.com/questions/21490194/…

【参考方案1】：

我已经使用过滤器更新了您的小提琴解决方案。

添加：

angularApp.filter('friendsHTML', function() 
  return function(input) 
      var html = '';
      for (idx in input) 
          html += '<div>' + input[idx].name + '</div>';
      
      return html;
  ;
);

然后在data-content 参数的模板中执行data-content=" phone.friends | friendsHTML "。不过，这可能会以某种方式变得更通用/可重用。

This 可能也值得研究。希望对您有所帮助！

【讨论】：

这行得通，但我觉得可能有更好的解决方案（也可能会让项目中的其他开发人员感到困惑）。你认为使用像 ng-include 这样的东西也可以吗？注意：我对 ng-include 不太擅长，所以我现在正在研究这个。

我同意它肯定看起来令人困惑......可能不那么令人困惑的是整个事情的指令，但我认为无论哪种方式都是属性的内容都需要预编译。绝对有兴趣查看任何解决方法。

【参考方案2】：

如果有人感兴趣，这里有一个可以运行的 JS Fiddle：

http://jsfiddle.net/grzesir/TZ72k/2/

Javascript：

var angularApp = angular.module("bootstrap", []);

angularApp.controller('MainController', function ($scope) 
    $scope.phones = [
        'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.',
            'friends': [
            'name': 'John'
        , 
            'name': 'Mike'
        ]
    , 
        'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.',
            'friends': [
            'name': 'John 2'
        , 
            'name': 'Mike 2'
        ]
    , 
        'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.',
            'friends': [
            'name': 'Chris'
        , 
            'name': 'Noah'
        ]
    ];
);

angularApp.directive('popOver', function ($compile, $templateCache) 
        var getTemplate = function () 
            $templateCache.put('templateId.html', 'This is the content of the template');
            console.log($templateCache.get("popover_template.html"));
            return $templateCache.get("popover_template.html");
        
        return 
            restrict: "A",
            transclude: true,
            template: "<span ng-transclude></span>",
            link: function (scope, element, attrs) 
                var popOverContent;
                if (scope.friends) 
                    var html = getTemplate();
                    popOverContent = $compile(html)(scope);                    
                    var options = 
                        content: popOverContent,
                        placement: "bottom",
                        html: true,
                        title: scope.title
                    ;
                    $(element).popover(options);
                
            ,
            scope: 
                friends: '=',
                title: '@'
            
        ;
    );

HTML：

<div ng-app="bootstrap" id="example" ng-init="items = ['car', 'truck', 'plane', 'bike']">
    <div ng-controller="MainController">
        <div ng-repeat="phone in phones">
            <a href="#" pop-over friends="phone.friends", title="Mode of transport">Show Pop over</a>
        </div>
    </div>
    <script type="text/ng-template" id="popover_template.html">
        <ul class='unstyled'><li ng-repeat='friend in friends'>friend.name</li></ul>
    </script>
</div>

【讨论】：

是否可以在指令中更改 popOver 触发器