angularjs中的动态标题-使用ng-attr-title [英] Dynamic Title in angularjs - using ng-attr-title
问题描述
如何在angularJS中获得动态标题.我知道如何使用 ng-attr-title
如下所示
How can i get a dynamic title in angularJS.I know to use ng-attr-title
as given below
<div ng-app="myApp" ng-controller="ctrl">
<div ng-attr-title="{{title}}">Hover me</div>
</div>
而控制器是
var app = angular.module('myApp', []);
function ctrl($scope){
$scope.title = "I 'm a tooltip!";
}
这是 JSfiddle 及其工作原理.我正在尝试的是在启用时有两个不同的标题,而在禁用时又有两个,所以我想确定在运行时进入 ng-attr-title
的变量,如下所示.
Here is the JSfiddle and its working. What i am trying is to have two different titles one while enabled and another while disabled so i want to decide the variable that goes in to ng-attr-title
at runtime as given below.
<div ng-app="myApp" ng-controller="ctrl">
<div ng-attr-title="{{message}}">Hover me</div>
</div>
而控制器是
var app = angular.module('myApp', []);
function ctrl($scope){
$scope.Enabledtitle = "U can click me";
$scope.Disabledtitle = "U cannot click me";
$scope.message="Enabledtitle";
}
因此,当我将鼠标悬停时,我应该得到提示您可以单击我"的提示.这样,我就可以通过更新范围变量 message
So when i hover i should get the tooltip saying "U can click me". SO that i get the flexibility to switch between the tooltip messages just by updating the scope variable message
这里是 JSfiddle ,我在其中尝试了动态标题并获得了"Enabledtitle"作为工具提示您可以点击我".
Here is the JSfiddle where i tried the dynamic title and am getting "Enabledtitle" as tooltip instead of "U can click me".
我该如何告诉angular解析 {{Enabledtitle}}
并赋予其值.
How can i tell angular to parse {{Enabledtitle}}
and gimme its value.
推荐答案
您将需要使用:
You will need to use bracket notation to access property with the variable name. So the title attribute becomes ng-attr-title="{{this[message]}}
:
var app = angular.module('myApp', []);
function ctrl($scope) {
$scope.Enabledtitle = "U can click me";
$scope.Disabledtitle = "U cannot click me";
$scope.message = "Enabledtitle";
}
<script src="http://code.angularjs.org/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<div ng-attr-title="{{this[message]}}">Hover me</div>
</div>
在您的情况下, this
指向当前作用域对象 $ scope
,并且您正在通过动态键 message
读取其属性.
In your case, this
points to current scope object $scope
and you are reading it's property by dynamic key message
.
演示: http://jsfiddle.net/oetd3bvy/2/
这篇关于angularjs中的动态标题-使用ng-attr-title的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!