动态关闭和打开URL格式
[英]Dynamically Turn Off and On URL formatting
问题描述
In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. 
在AngularJS中，您可以使用ng-class属性向元素动态添加类格式。 I want to dynamically change whether some text is displayed as plain text or link a hyperlink. 我想动态更改某些文本显示为纯文本还是链接超链接。
I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are. 我也在使用引导程序，但是<a>未定义为像h1-h5这样的类。
For example, for <h1> I can just do this in AngularJS: 例如，对于<h1>我可以在AngularJS中执行以下操作：
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
But this didn't work to display as a url: 但这无法显示为网址：
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
So after the answer from Asiel Leal Celdeiro I just had to add the working code here: 因此，在Asiel Leal Celdeiro回答之后，我只需要在此处添加工作代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS Example</title> <!-- JQuery for Bootstrap --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- AngularJS --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="MyCtrl"> <p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p> <br> <label> <input type="checkbox" ng-model="isURL"> Make it look like a link </label><br> </div> <script> var app = angular.module('myApp',[]); app.controller('MyCtrl', ['$scope', function($scope) { $scope.isURL= false; }]); </script> </body> </html>
1 个解决方案
解决方案1
3 已采纳 2016-11-22 23:19:36
EDITED If you really need it to be a div you can use: 编辑如果您真的需要将其用作div ，则可以使用：
<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->
<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>
or if you can put an a or a button you can use: 或者，如果您可以放置a或button ，则可以使用：
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
or 要么
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. 如果myController.isURL表达式通过angular求值，则所有这些都将显示为URL；否则，将显示为纯文本。 It basically, puts the classes btn and btn-link if the expression is true. 基本上，如果表达式为真，则将类btn和btn-link放入。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.