2016-09-22 6 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であるということです。私は2つの異なるテキストが必要です。また、私はng-mouseoverを試しましたが、なんらかの理由で動作していないので、title属性を使用しました。

誰もがこれで私を助けることはできますか?どんな助けもありがとう! ありがとう!

答えて

2

あなたがあなたのngDisabled機能でタイトルを変更することができますng-attr-title="{{ message }}"

としてtitle属性をspecificying行うことができること、あなたが動的または何らかのアクションにタイトル(ホバータイトル)を変更したいようです。

$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

isPublished()関数内の$ scope.messageはうまくいった!ありがとう! –

+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を見てください。

関連する問題