Have used this code which invokes the user defined function : getTooltipText
<i tooltip=\"{{ getTooltipText(arg1) }}\"> </i>
....
//function definition
$scope.getTooltipText = function(arg1){
console.log(arg1); // prints undefined
....
return text;
}
But it is not working. Have even tried trinary operator, but no luck!! Any suggestion?
instead of {{ getTooltipText(arg1) }} ,may be you can use ngMouseenter and ngMouseleave directive.
<div ng-mouseenter="getTooltipText(arg1)">
<i tooltip="{{tooltip}}"></i>
</div>
In your controller:
$scope.getTooltipText = function(arg1){
$scope.tooltip = "Your tooltip here";
}
link
(I am not sure about usage of arg1)
I took code from angular site and modified it a little just to demonstrate working of it:
<body ng-app="" ng-controller="controller">
<button ng-mouseenter="mouseOvver()" ng-mouseleave="mouseLeave()">
when mouse enters
</button>
count: {{msg}}
<script type="text/javascript">
function controller($scope)
{
$scope.mouseOvver = function()
{
$scope.msg="Ok I got u";
}
$scope.mouseLeave = function()
{
$scope.msg="";
}
}
</script>
</body>
Related
I have to hide a div on click .
<div ng-if="hideDiv">
<div>text text text text</div>
<a ng-click="hideMe(false)">Click Me To Hide</a>
</div>
Controller
this.hideMe = function(action){
$scope.hideDiv = action;
}
tested results are
console.log($scope.hideDiv) // Is false
{{hideDiv}} <!--Is false-->
But still ng-if doesn't hide div ?
Please, test the snippet below. I'm pretty sure your problem is due to some angularJS configuration failure
(function(){
angular.module("app", []).controller("testController", function($scope)
{
$scope.showDiv = true;
$scope.hideMe = function(IsVisible)
{
$scope.showDiv = IsVisible;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="testController">
<div ng-if="showDiv">
<a ng-click="hideMe(false)">Click Me To Hide</a>
</div>
</div>
I have HTML code with inline element:
<span class="title" ng-click="update()">Rock</span>
How to replace this element on input element after click for edit?
And then after push enter on input return back span element?
I tried with directives ng-hide(), ng-show(). But I wonder
You can use either
<span class="title" ng-hide="isEdited" ng-click="update()">Rock</span>
or
<span class="title" ng-show="!isEdited" ng-click="update()">Rock</span>
or even
<span class="title" ng-if="!isEdited" ng-click="update()">Rock</span>
In any case you will want to reference something that can be truthy. For example in your controller you would have something like this in your function
/*the init function just makes sure that everything is setup
and nothing caries over from any local storage or anything
else you may be using*/
init();
init function(){
$scope.isEdited = false;
}
$scope.update = function(){
$scope.isEdited = true;
}
What you need to do is set a variable that contains the state;
<html>
<body ng-app="app">
<div ng-controller="mainController as $ctrl">
<span ng-if="!$ctrl.isInEditMode" class="title" ng-click="$ctrl.update()" ng-bind="$ctrl.spanText"></span>
<div ng-if="$ctrl.isInEditMode">
<input type="text" placeholder="Value for rock" ng-model="$ctrl.spanText" />
<button ng-click="$ctrl.update()">Done</button>
</div>
</body>
</html>
angular.module('app', [])
.controller('mainController', function($scope) {
this.isInEditMode = false;
this.spanText = 'Rock';
this.update = (function() {
this.isInEditMode = !this.isInEditMode;
}).bind(this);
});
I have prepared a Codepen that shows an possible solution: http://codepen.io/stefferd/pen/QdQrrv
I have a button which when clicked displays a windows and hides it when the button is clicked again.I want the window to close even if any other place in the page is clicked.
This is my code :
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">
//The div to show hide
<div ng-class="{'open':content}" > div content </div>
I wrote the following window on click code in the controller but it didn't work..
$window.onclick = function () {
if($scope.contentClick){
$scope.contentClick=0;
}
else{$scope.content=false;
$scope.$apply();}
}
What is the correct way to do this?Can anyone please guide me in the right direction.Thanks.
Try this, change your controller ID:
window.onclick = function () {
var scope = angular.element(document.getElementById('controller_id')).scope();
if(scope.contentClick){
scope.contentClick=0;
}
else{
scope.content=false;
scope.$apply();
}
}
I'm not sure what do you want to achieve after content was clicked, but you can $watch content value in controller and run some action when content change value
Please see script below
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.$watch('content', function(value) {
if (value) {
$scope.contentClick = 1;
} else {
$scope.contentClick = 0;
}
})
});
.open {
color: red ;opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">Click me </a>
<hr/>//The div to show hide
<div ng-class="{'open':content}">div content {{contentClick}}
</div>
</div>
</div>
I've got this code:
<html>
<head>
</head>
<div ng-app="" ng-controller="Test">
<input type="text" ng-model="inputty">
<p>{{output}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
function Test($scope){
if($scope.inputty=="Hello") {
$scope.output="OK!";
} else {
$scope.output="NOT OK!";
}
}
</script>
</html>
But it's not working, the NOT OK! displays. But it's like the if statement can't read from inputty. So it should state OK! when I type Hello in the input box.
You need to add in a watch in your controlller in order to check the value of inputty and inside the watch function have the if loop so that you can change the output scope variable
Code:
function Test($scope) {
$scope.inputty = '';
$scope.$watch('inputty', function () {
if ($scope.inputty == "Hello") {
$scope.output = "OK!";
} else {
$scope.output = "NOT OK!";
}
});
}
Working Fiddle - $watch
Reference for $watch
Alternatively,
You can do it alone in HTML markup using ng-switch
HTML markup
<div ng-app ng-controller="Test">
<input type="text" ng-model="inputty" />
<div ng-switch="inputty">
<p ng-switch-when="Hello">OK!</p>
<p ng-switch-default>NOT OK!</p>
</div>
</div>
Working Fiddle - ng-switch
Reference for ng-switch
If you only change your inputty through textbox, the easiest way is to use ngChange.
I want a button in angularJs, that when I press it a function is called and when I press it again it does another function, like an ON-OFF switch.
I have this:
<a ng-click="addForm(data)" href=""> <div class="starOff" ng-class="{starOn: checkF(data)}"></div> </a>
I would to call another function when I click it once.
You can use ng-switch.
<div ng-app ng-controller="Ctrl">
<div ng-switch on="selected">
<button ng-switch-when='true' ng-click='button1()'>button1</button>
<button ng-switch-when='false' ng-click='button2()'>button2</button>
</div>
</div>
function Ctrl($scope) {
$scope.selected = true;
$scope.button1 = function () {
//do logic for button 1
$scope.selected = !$scope.selected;
console.log('btn1 clicked');
}
$scope.button2 = function () {
//do logic for button 2
$scope.selected = !$scope.selected;
console.log('btn2 clicked');
}
}
Demo on jsFiddle
Why don't you change the ng-click to something other than addForm(data), like handleClick(data), and then in your controller you can define handleClick(data) to call addForm(data) if a certain flag is already true?
Another possible solution, using ng-click and ng-class to toggle the class.
HTML
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<a ng-click="newClass=toggleClass($event)" ng-class="newClass" href="">Toggle</a>
</div>
</div>
JS
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.toggleClass = function(obj) {
if (obj.srcElement.className == 'starOn') {
return 'starOff';
} else if (obj.srcElement.className == 'starOff') {
return 'starOn';
} else {
return 'starOn';
}
}
};
There are probably better ways to grab the current class name.
Here's the full jsFiddle.
Try using a property instead of a call to the function checkF(). Pretend the property is mySwitch. When your addForm() is called, set mySwitch to true.
How To Toggle A Function Using ng-click
One (of many) methods to swap between two functions when using ng-click. It uses a similar method to what tnunamak suggested.
HTML
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<a ng-click="toggle(toggled)" ng-init="toggled=false" href="">Toggle</a>
</div>
</div>
JS
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.toggle = function(toggled) {
if (toggled == false) {
alert('Function A');
$scope.toggled = true;
} else if (toggled == true) {
alert('Function B');
$scope.toggled = false;
}
}
};
And the full jsFiddle.
You can implement it using Font-Awesome and angular js with following example
<div class="onoffswitch" >
<input type="checkbox" name="someOnOFF" class="onoffswitch-checkbox" id="myonoffswitch6" ng-model="vm.youmodelOnOff" />
<label class="onoffswitch-label" for="myonoffswitch6">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>