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>
Related
I have some data in the ng repeat, and inside that I have some data under each divs which is collapsed.
No when I click on the main div, I want only one div to collapse in at a time.
Eg: if I click abc, asdasd should be displayed.. Then if I click abc1, asdasd1 should be displayed but NOT asdasd
<script>
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(s) {
s.people = [
{name:"Sten", age:"49"}
,{name:"John", age:"39"}
,{name:"Hanne", age:"37"}
,{name:"Jens", age:"37"}
,{name:"Brian", age:"24"}
,{name:"Johnny", age:"24"}
,{name:"Peter", age:"49"}
]
s.obj = [
{
"name":'abc',
"text":'asdasd'
},
{
"name":'abc1',
"text":'asdasd1'
}
]
}])
html:
<body ng-app="myApp" ng-controller="Ctrl_List">
<div ng-repeat="ob in obj">
<button class="btn" data-toggle="collapse" href="#abc-{{ob.name}}"> {{ob.name}}</button>
<div id="abc-{{ob.name}}" class="collapse">{{ob.text}}</div>
</div>
</body>
data-parent is not working for me, or may be I am not using it properly.
Please Check the Fiddle here
Using a pure Angular approach rather than using JQuery for this.
Add a new property show to the each object and use ng-if to show/hide its corresponding text using a method in controller.
<div ng-repeat="ob in obj">
<button class="btn" ng-click=" showThis(ob)"> {{ob.name}}</button>
<div ng-if="ob.show">{{ob.text}}</div>
</div>
controller method
s.showThis = function(obj) {
//Hides all
angular.forEach(s.obj, function(ob) {
if(ob.name != obj.name) {
ob.show = false;
}
});
//Toggles current object show/hide
obj.show = !obj.show;
}
Working Fiddle
I have a question about the AngularJS editable framework. When using an editable, two buttons appear: the save button and the cancel button. However, I want a third button (with a minus symbol) to delete the text in the editable. How can I add a third delete button?
Here is a fiddle of one of my previous questions:
Example with only two buttons
{{ user.name || 'empty' }}
Don't think they have support for this right now.
I've done it myself.
var app = angular.module("app", ["xeditable"]);
app.run(function (editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function ($scope) {
$scope.user = {
name: 'awesome user'
};
$scope.showClear = function () {
$scope.show = true;
}
$scope.empty = function () {
$scope.user.name = "";
$scope.show = false;
}
});
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<span href="#" editable-text="user.name" ng-click="showClear()">{{ user.name || 'empty' }}</span>
<button class="btn btn-default" ng-click="empty()" ng-show="show">
-
</button>
</div>
Hope this will help :).
I have HTML code with ng-click event:
<div class="btn share" ng-click="do($event)">
<span">1</span>
</div>
Angular JS:
$scope.do = function (event) {
var target = angular.element(event.target);
var parsed = parseInt(target.find('span').text(), 10);
}
When I click to element div or child element span is called event do().
But if I click on span my counter inside span is not increment. Only by clicking parent element div.
How I can set same $event for div and span elements?
I would recommend to work with scope bindings instead of DOM textContent:
<div class="btn share" ng-click="do()">
<span>{{count}}</span>
</div>
and in controller
$scope.count = 0;
$scope.do = function () {
$scope.count++;
};
If you however still want to know why it failed with your approach, it's because you need to use currentTarget, not just target:
angular.module('demo', []).controller('MainCtrl', function($scope) {
$scope.do = function(event) {
var target = angular.element(event.currentTarget);
var parsed = parseInt(target.find('span').text(), 10);
target.find('span').text(parsed + 1);
};
});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<div ng-app="demo" ng-controller="MainCtrl" class="btn share" ng-click="do($event)">
<span>1</span>
</div>
But don't do this, controller should not work with DOM at all, this is
not what controllers are for.
You're doing it the wrong way. Angular is not jQuery. You shouldn't do any DOM manipulation in the controller. The view should be generated based on the model, and not vice-versa.
The code should be
<div class="btn share" ng-click="do()">
<span>{{ counter }}</span>
</div>
and in the controller:
$scope.counter = 1;
$scope.do = function() {
doSomethingWithCounter($scope.counter);
}
Have you tried adding the same click event to your span also?
Like this
<span ng-click="do($event)"> 1 </span>
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>
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>