Question

如何在angularJS中获得动态标题。我知道如下所示使用ng-attr-title

<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的变量，如下所示。

<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";    
}

所以当我徘徊时，我应该得到工具提示说＆＃34;你可以点击我＆＃34;。因此，只需更新范围变量message

，我就可以灵活地在工具提示消息之间切换

这是JSfiddle，我在那里尝试了动态标题，并且正在获得＆＃34; Enabledtitle＆＃34;作为工具提示而不是＆＃34;你可以点击我＆＃34;。

我如何告诉angular解析{{Enabledtitle}}并赋予其价值。

Answer 1

您需要使用bracket notation来访问具有变量名称的属性。因此title属性变为Skip Install = NO Installation Directory = /Applications：

＆＃13;

ng-attr-title="{{this[message]}}

＆＃13;

var app = angular.module('myApp', []);

function ctrl($scope) {
    $scope.Enabledtitle = "U can click me";
    $scope.Disabledtitle = "U cannot click me";
    $scope.message = "Enabledtitle";
}

＆＃13;

在您的情况下，<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读取它的属性。

演示： http://jsfiddle.net/oetd3bvy/2/

Answer 2

在控制器中：

$scope.getMessage() {
    return isEnabled ? "You can click me" : "You can't click me";
}

在视图中：

<div title="{{ getMessage() }}">...</div>

或者，每次代码更改isEnabled标志的值时，也会更改消息。

Answer 3

做

$scope.message="Enabledtitle";

而不是

WatchConnectivity

angularjs中的动态标题 - 使用ng-attr-title

3 个答案: