动态关闭和打开 URL 格式
Dynamically Turn Off and On URL formatting
在 AngularJS 中,您可以使用 ng-class
属性向元素动态添加 class 格式。我想动态更改某些文本是显示为纯文本还是 link hyperlink.
我也在使用 bootstrap,但 <a>
没有像 h1 - h5 那样被定义为 class。
例如,对于 <h1>
我可以在 AngularJS 中这样做:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
但这无法显示为 url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
所以在 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>
已编辑
如果你真的需要它成为 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>
或者,如果您可以放置 a
或 button
,您可以使用:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
或
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
如果 angular 计算 myController.isURL
表达式为真,则所有这些都将显示为 URL,否则将显示为纯文本。基本上,如果表达式为真,则放置 类 btn 和 btn-link。
在 AngularJS 中,您可以使用 ng-class
属性向元素动态添加 class 格式。我想动态更改某些文本是显示为纯文本还是 link hyperlink.
我也在使用 bootstrap,但 <a>
没有像 h1 - h5 那样被定义为 class。
例如,对于 <h1>
我可以在 AngularJS 中这样做:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
但这无法显示为 url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
所以在 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>
已编辑
如果你真的需要它成为 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>
或者,如果您可以放置 a
或 button
,您可以使用:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
或
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
如果 angular 计算 myController.isURL
表达式为真,则所有这些都将显示为 URL,否则将显示为纯文本。基本上,如果表达式为真,则放置 类 btn 和 btn-link。