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屋！