angularjs – Angular UI中的弹出模板
发布时间:2020-12-17 07:30:23 所属栏目:安全 来源:网络整理
导读:我在我当前的项目中使用angular-ui-bootstrap,并且我需要在显示行特定信息的网格中的每一行中打开一个popover.弹出窗口应该有自己的 HTML模板,并且可以在 HTML模板中绑定多个字段.这是我为实现同样目的而编写的代码.我确实试图通过html模板没有运气.任何帮助
我在我当前的项目中使用angular-ui-bootstrap,并且我需要在显示行特定信息的网格中的每一行中打开一个popover.弹出窗口应该有自己的
HTML模板,并且可以在
HTML模板中绑定多个字段.这是我为实现同样目的而编写的代码.我确实试图通过html模板没有运气.任何帮助表示赞赏.
HTML代码: <div ng-app="helloAngular" ng-controller="casesCntrl"> <table class="table table-bordered"> <thead> <tr> <th class="">Date</th> <th class="">Case</th> <th class="">Severity</th> <th class="">Status</th> <th class="">Site</th> </tr> </thead> <tbody> <tr ng-repeat="case in cases"> <td>{{case.casedate | date:'MM/dd/yyyy'}}</td> <td><a ng-href="#/site/{{case.id}}">{{case.name}}</a></td> <td ng-class="{'case-critical':case.severity==1,'case-urgent':case.severity==2,'case-normal':case.severity==3}" class="case-none"></td> <td>{{case.status}}</td> <td>{{case.sitename}} <button popover="{{case.sitename}}" popover-title="{{case.sitedescription}}" data-placement="bottom" data-trigger="focus" class="btn btn-default" popover-unsafe-html="This is a Help but please <b> focus </b> on this">V</button></td> </tr> </tbody> </table> </div> JS代码: function CasesController($scope) { var casesData = [ { "name": "Case -1","casedate":"2013-06-26T08:02:00-0700","caseid":1,"severity": "1","status":"New","siteid":1,"sitename":"Merchant Demo 1" },{ "name": "Case -2","casedate":"2013-01-26T08:02:00-0700","caseid":2,"siteid":2,"sitename":"Merchant Demo 2" },{ "name": "Case -3","casedate":"2013-02-26T08:02:00-0700","caseid":3,"status":"Accepted","sitename":"Merchant Demo 3" },{ "name": "Case -4","casedate":"2013-05-26T08:02:00-0700","caseid":4,"severity": "2","sitename":"Merchant Demo 4" },{ "name": "Case -5","casedate":"2013-09-26T08:02:00-0700","caseid":5,"severity": "3","sitename":"Merchant Demo 5" },{ "name": "Case -6","casedate":"2013-04-26T08:02:00-0700","caseid":6,"status":"Sent to billing","sitename":"Merchant Demo 6" },{ "name": "Case -7","casedate":"2013-10-26T08:02:00-0700","caseid":7,"sitename":"Merchant Demo 7" } ]; $scope.cases = casesData; } 这是与上述代码相同的小提琴: 我确实通过传递popover-unsafe-html来尝试该选项,如https://github.com/angular-ui/bootstrap/pull/641所述
现在无法完成,请查看以下问题以获取更多详细信息:
https://github.com/angular-ui/bootstrap/issues/220 您可以如何使用角度带来实现这一目标.详情请见:http://mgcrea.github.io/angular-strap/##popovers (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |