गतिशील शीर्षक - एनजी-attr-शीर्षक

Question

का उपयोग कर मैं कैसे angularJS.I में एक गतिशील शीर्षक

<div ng-app="myApp" ng-controller="ctrl"> 
<div ng-attr-title="{{title}}">Hover me</div> 
</div> 

नीचे दिए गए के रूप में उपयोग करने के लिए ng-attr-title पता प्राप्त कर सकते हैं और नियंत्रक

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

तो है जब मैं मंडराना मैं टूलटिप कह "यू मुझे क्लिक कर सकते हैं" मिलना चाहिए। ताकि मैं लचीलापन सिर्फ गुंजाइश चर message

यहाँ अपडेट करके टूलटिप संदेशों के बीच स्विच करने के लिए मिलता JSfiddle जहां मैं गतिशील शीर्षक की कोशिश की और हो रही है "Enabledtitle" के बजाय "यू मुझे क्लिक कर सकते हैं" का टूलटिप के रूप में है।

मैं {{Enabledtitle}} को पार्स करने के लिए कोणीय कैसे कह सकता हूं और इसके मूल्य को समझ सकता हूं।

Answer 1

आप चर नाम के साथ संपत्ति का उपयोग करने की bracket notation का उपयोग करने की आवश्यकता होगी है। तो शीर्षक विशेषता ng-attr-title="{{this[message]}} हो जाता है: वर्तमान क्षेत्र वस्तु $scope को

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 अंक और आप इसे गतिशील कुंजी message द्वारा संपत्ति है पढ़ रहे हैं।

डेमो: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=$scope.Enabledtitle; 

बजाय

$scope.message="Enabledtitle";