Динамический заголовок в angularjs-использование ng-attr-title
как я могу получить динамический заголовок в 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";
}
поэтому, когда я зависаю, я должен получить подсказку с надписью "U can click me". Так что я получаю гибкость для переключения между сообщениями всплывающей подсказки, просто обновляя переменную scope message
здесь JSfiddle где я пробовал динамический заголовок и получаю "Enabledtitle" в качестве всплывающей подсказки вместо "U может щелкнуть меня".
как я могу сказать Angular для разбора {{Enabledtitle}} и дайте мне его значение.
3 ответов
вам нужно будет использовать скобочная нотация получить доступ к свойству с именем переменной. Таким образом, атрибут title становится 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.
в контроллере:
$scope.getMessage() {
return isEnabled ? "You can click me" : "You can't click me";
}
в виде:
<div title="{{ getMessage() }}">...</div>
или, каждый раз, когда код изменяет значение isEnabled флаг, также измените сообщение.