Liste Modèle Angulaire de l'INTERFACE utilisateur
Je suis en utilisant angular-ui-bootstrap dans mon projet actuel, et j'ai une exigence pour une liste d'ouvrir dans chaque ligne de la grille de l'affichage de la ligne des informations spécifiques. La liste doit avoir son propre modèle HTML et il ya plusieurs domaines qui peuvent être liés dans le modèle HTML. Voici le code que j'ai écrit pour atteindre le même. J'ai essayé de passer le modèle html avec pas de chance. Toute aide est appréciée.
Code 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>
Code 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,
"severity": "1",
"status":"New",
"siteid":2,
"sitename":"Merchant Demo 2"
},
{
"name": "Case -3",
"casedate":"2013-02-26T08:02:00-0700",
"caseid":3,
"severity": "1",
"status":"Accepted",
"siteid":1,
"sitename":"Merchant Demo 3"
} ,
{
"name": "Case -4",
"casedate":"2013-05-26T08:02:00-0700",
"caseid":4,
"severity": "2",
"status":"New",
"siteid":1,
"sitename":"Merchant Demo 4"
} ,
{
"name": "Case -5",
"casedate":"2013-09-26T08:02:00-0700",
"caseid":5,
"severity": "3",
"status":"New",
"siteid":1,
"sitename":"Merchant Demo 5"
} ,
{
"name": "Case -6",
"casedate":"2013-04-26T08:02:00-0700",
"caseid":6,
"severity": "1",
"status":"Sent to billing",
"siteid":1,
"sitename":"Merchant Demo 6"
},
{
"name": "Case -7",
"casedate":"2013-10-26T08:02:00-0700",
"caseid":7,
"severity": "3",
"status":"New",
"siteid":1,
"sitename":"Merchant Demo 7"
}
];
$scope.cases = casesData;
}
Ici, c'est le violon qui a le même code que décrit ci-dessus:
http://jsfiddle.net/anirbankundu/YyK5s/4/
Je l'ai fait essayer l'option en passant fenêtre pop-over-dangereux-html comme décrit dans https://github.com/angular-ui/bootstrap/pull/641
OriginalL'auteur Anirban | 2014-02-24
Vous devez vous connecter pour publier un commentaire.
Ne peut pas être fait droit maintenant, vérifiez le problème suivant pour plus de détails:
https://github.com/angular-ui/bootstrap/issues/220
Vous pouvez aussi utiliser angulaires-sangle pour réaliser la chose. Les détails sont disponibles sur: http://mgcrea.github.io/angular-strap/##popovers
vous devriez être en mesure de le faire car les deux utilisent différents modules/directives, il ne devrait pas y avoir de conflit dans le fait d'avoir les deux dans un même projet.
OriginalL'auteur Faisal Feroz
La fonctionnalité de fournir un modèle pour une liste est introduit dans angulaire de l'INTERFACE utilisateur bootsrap version 0.13.0 à l'aide de liste-modèle attribut qui prend l'emplacement d'un modèle à utiliser pour la liste du corps.
http://angular-ui.github.io/bootstrap/#/popover
OriginalL'auteur Ida N
La question ouverte référencé par Fayçal Feroz sur angular-ui a été fermé et ajoutées à la version 0.13.0 du cadre, de sorte que maintenant c'est possible. Jetez un oeil à https://github.com/angular-ui/bootstrap/issues/220
OriginalL'auteur Jadiel de Armas