angularjsコントローラデータをブートストラップポップオーバーにバインドする方法

私のangularJsアプリケーションでは、ブートストラップポップオーバーを使用しており、コントローラデータをポップオーバーの内容にバインドする問題があります。は私のコードです。angularjsコントローラデータをブートストラップポップオーバーにバインドする方法

  <ul> 
       <li ng-repeat="rpt in obj.reports track by rpt.name"> 
        {{rpt.name}} 
        <span class="glyphicon glyphicon-info-sign" 
          data-toggle="popover" data-trigger="hover" 
          title="Driver reports" data-content="rpt.info" popover> 
        </span> 
       </li> 
      </ul>

{{rpt.info}}をポップオーバーのデータコンテンツにバインドする方法を教えてください。

出典

2016-07-06 Balu

したがって、角度の付いたブートストラップを作成するには、これらのすばらしいモジュールの1つを使用できます。

Angular Strap または Angular UI Boostrap

アンギュラストラップのモーダル：
http://mgcrea.github.io/angular-strap/#/modals

アンギュラUIのモーダル：
https://angular-ui.github.io/bootstrap/#/modal

出典

2016-07-06 15:23:27 Srijith

それが角張っているので、私はUIブートストラップ（https://angular-ui.github.io/bootstrap/#/top）を使用しますアプリ。ここではUIブートストラップを使用してコードです：

var app = angular.module('popoverApp', ['ui.bootstrap']); 
 

 
    app.controller('MainCtrl', function() { 
 
     var vm = this; 
 

 
     this.reports = [{ 
 
     name: 'Report 1', 
 
     info: 'this is report 1' 
 
     }, { 
 
     name: 'Report 2', 
 
     info: 'this is report 2' 
 
     }, { 
 
     name: 'Report 3', 
 
     info: 'this is report 3' 
 
     }]; 
 
    });

<!DOCTYPE html> 
 
<html ng-app="popoverApp"> 
 

 
<head> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl as obj"> 
 
    <ul> 
 
    <li ng-repeat="rpt in obj.reports track by rpt.name"> 
 
     {{rpt.name}} 
 
     <div class="glyphicon glyphicon-info-sign" uib-popover="{{rpt.info}}" popover-trigger="mouseenter" popover-title="Driver reports" popover-placement="right"> 
 
     </div> 
 
    </li> 
 
    </ul> 
 

 
</body> 
 

 
</html>

出典

2016-07-06 15:48:36 jbrown

パーフェクトは、それが働きました。ありがとう。 – Balu

ようこそ。これを正しい答えと記入して、他の人が答えられたことを知るようにしてください。 – jbrown

angularjsコントローラデータをブートストラップポップオーバーにバインドする方法

答えて

関連する問題