2016-09-22 2 views
2

Я работаю с AngularJS, CSS и HTML.Динамически меняйте текст кнопки в AngularJs

Вот что я пытаюсь сделать: Кнопка отключается в зависимости от выхода определенной функции isPublished(). Мне нужен текст наведения над кнопкой, например, когда кнопка отключена, наведение над текстом может быть «I'm disabled», и когда он не отключен, наведите курсор на текст «I'm not disabled».

Код:

<span> 
<input title="Im disabled" type="button" class="btn btn-primary" value="Publish" ng-click="publishFingerPrint()" ng-hide="isEdit" ng-disabled="isPublished()"/> 
</span> 

<script> 
$(function() { 
    $(".btn btn-primary:ng-disabled").wrap(function() { 
     return '<span title="' + $(this).attr('title') + '" />'; 
    }); 
}); 
</script> 

С выше коде, я получаю текст при наведении на кнопку (при отключении и если не отключен). Но проблема в том, что текст тот же = Im not disabled. Мне нужны два разных текста. Также я попробовал ng-mouseover, но по какой-то причине он не работает, поэтому я пошел с атрибутом title.

Может ли кто-нибудь помочь мне с этим? Любая помощь приветствуется! Спасибо!

ответ

2

кажется, что вы хотите изменить название (название парения) динамически или на какое-то действие, которое может быть сделано specificying атрибут заголовка, как ng-attr-title="{{ message }}"

Вы можете изменить название вашей ngDisabled функции.

$scope.isPublished = function(){ 
    $scope.message = "I'm disalbed"; 
} 

var app = angular.module('myApp', []); 
 
function ctrl($scope) { 
 
    $scope.message = "Old Title"; 
 
    $scope.changeTitle = function(){ 
 
     $scope.message = "New Title"; 
 
    }; 
 
}
<script src="http://code.angularjs.org/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="ctrl"> 
 
    <div ng-attr-title="{{ message }}">Hover me</div> 
 
    <br/><br/> 
 
    {{message}} 
 
    <button ng-click="changeTitle()">Change Hover Title</button> 
 
</div>

+0

$ scope.message внутри функции isPublished() отлично работает! Благодаря! –

+0

@NikhilHegde Рад видеть, что это помогло вам :) –

1

Вы можете попробовать что-то вроде этого.

<body ng-app="app" ng-controller="ctr"> 
     <button type="button" class="btn btn-primary" ng-click="disable = !disable;changeTitle();">Click</button> 
     <input title="{{title}}" type="button" class="btn btn-primary" value="Publish" ng-disabled="disable"/> 
     <script> 
     angular.module('app',[]).controller('ctr',function($scope){ 
      $scope.changeTitle = function(){ 
      $scope.title = $scope.disable ? 'I m disabled' : 'I m not disabled'; 
      } 
     }) 
     </script> 
    </body> 

Посмотрите на работу plunker.