i have two divs i want to show them conditionally with onclick event .
my-angular-app.js
$(document).on('click', '#showless', function(el) {
var appElement = document.querySelector('[ng-app=myapp]');
var $scope = angular.element(appElement).scope();
$scope.$apply(function() {
$scope.value = false;
});
});
$(document).on('click', '#showmore', function(el) {
var appElement = document.querySelector('[ng-app=myapp]');
var $scope = angular.element(appElement).scope();
$scope.$apply(function() {
$scope.value = true;
});
});
and my div of myapp (myapp.html)
<div ng-show="desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value|truncate}}<span><a id="showmore" href="">more</a></span>
</div>
<div ng-show="!desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value}}<span><a id="showless" href="">less</a></span>
</div>
(truncate is a filter i wrote which works fine .)
I'm not exactly sure what you are trying to do, but Angular provides ng-click, so you should not have to bind to $(document).on('click').
I'd suggest a simpler approach for conditional show:
<div ng-show="desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value|truncate}}<span><a id="showmore" ng-click="desc = true" href="#">more</a></span>
</div>
<div ng-show="!desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value}}<span><a id="showless" ng-click="desc = false" href="#">less</a></span>
</div>
The above uses ng-click to set the value of desc. Therefore, you don't need any other logic in the controller to toggle the divs.
Related
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>
I'm having trouble communicating with my angularJS radio buttons. I'm using the material design framework. I'm fairly new to angular.
HTML
<div ng-controller="MainCtrl as ctrl">
<md-radio-group class="user-type">
<div layout="row" layout-sm="column" layout-align="space-between" layout-align-sm="space-around center">
<md-radio-button ng-model="userType" value="prospective" name="user_type" ng-change='newValue(value)'>Prospective Patient</md-radio-button>
<md-radio-button ng-model="userType" value="patient" name="user_type" ng-change='newValue(value)'>Patient</md-radio-button>
<md-radio-button ng-model="userType" value="caregiver" name="user_type" ng-change='newValue(value)'> Caregiver </md-radio-button>
<md-radio-button ng-model="userType" value="doctor" name="user_type" ng-change='newValue(value)'>Doctor</md-radio-button>
</div>
</md-radio-group>
</div>
JS
.controller('MainCtrl', ['$scope', function($scope) {
var self = this;
$scope.newValue = function(value) {
console.log(value);
};
$scope.$watch('userType', function(value){
if(value == "patient"){
console.log(value);
self.showPatientStepTwo = true;
}else{
console.log(value);
self.showPatientStepTwo = false;
}
});
}])
My ng-change isn't firing and my $watch isn't working either.
Can anyone find where I'm going wrong? I can't communicate between my controller and view!
When you use the controller as syntax, you should bind to that instead of the scope. I think the md-radio-button directive was creating a child scope that was messing things up but hard to reproduce without that directive.
Here's a plunker with the model and click bound to ctrl instead of $scope: http://plnkr.co/edit/fSTBDAMZLFKJgRD4br9K?p=preview
Radios changed to input, but referencing the ctrl:
<input type="radio" ng-model="ctrl.userType" value="prospective" name="user_type" class="user-type-rdo md-warn md-hue-2" ng-change='ctrl.newValue(value)'>Prospective Patient
And the controller updated to move the newValue function off $scope:
.controller('MainCtrl', ['$scope', function($scope) {
var self = this;
this.newValue = function(value) {
console.log(value);
};
$scope.$watch(function(){return self.userType;}, function(value){
if(value == "patient"){
console.log(value);
self.showPatientStepTwo = true;
}else{
console.log(value);
self.showPatientStepTwo = false;
}
});
}])
The newValue function logs undefined - not sure what you were trying to do there, but you can use self.userType in the newValue function if you want the value.
First thing: You don't need to declare an ng-model on ea. angular-material radio button when using radio groups, as per the angular-material docs for radio buttons.
The second thing is, the standard $scope events behave a bit differently when you build your controllers using controllerAs syntax See controllerAs Reference.
function MainController($scope, $log) {
var vm = this;
vm.title = 'Some Title';
vm.showPatientStepTwo = false;
// does not work
$scope.$watch('userType', function(newVal, oldVal){
// do work
});
// works
$scope.$watch('vm.userType', function(newValue, oldValue) {
// do work with newValue
});
// also works
$scope.$watch(function() {
return vm.userType;
}, function(newValue, oldValue) {
vm.showPatientStepTwo = newValue === 'patient';
});
}
Working plunkr: http://plnkr.co/edit/Dth67cQJKarwt3NiE9yp
<div class="form-group">
<label>Type of ad <b class="text-danger">*</b></label><br>
<input type="radio" name="typeofAd" value="sell" ng-model="product.typeofAd"> I want to sell
<input type="radio" name="typeofAd" value="buy" ng-model="product.typeofAd"> I want to buy
</div>
radio button this way works fine for me
refer link
https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms
you need to add ng-model and ng-change event like below.
<md-radio-group ng-model="selectedVal" ng-change="showSelected()">
and in your controller you can defined function as following.
$scope.showSelected= function(){
console.log($scope.selectedVal);
}
I'm trying to show/hide something using angular but when it's called via $scope it doesn't work. If I change the show variable with ng-model it works fine.
<div id="editClient"
class="accordeon panel-group"
role="tablist"
aria-multiselectable="true"
ng-show="show">
....
</div>
And in my script this doesn't work.
client.controller('clientController', function($scope) {
$scope.show = true;
$scope.test = function() {
alert('clicked');
$scope.show = true;
}
The "clicked" is shown and I tried to use $apply, too, but result is the same.
But when I use ng-model it works
<input type="checkbox" value="true" ng-model="show">
Can someone explain me why it doesn't work with $scope.show ?
Debug.
Following works just fine using checkbox with ng-bind and button firing function in controller.
<input type="checkbox" ng-model="show">Toggle visibility
<br>
<button type="button" ng-click="toggle()">Toggle visibility</button>
<hr>
<div ng-show="show">Visible</div>
<div ng-show="!show">Hidden</div>
app.controller('Ctrl', function($scope, $http) {
$scope.show = true;
$scope.toggle = function() {
$scope.show = !$scope.show;
};
});
Following works fine using $scope. See jsfiddle
http://jsfiddle.net/ffKTy/312/
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>
I know you're not supposed to put your display logic inside of a controller and I'm struggling with the proper AngularJS way to approach this.
I'm presenting forms inside modals. I'm using Zurb Foundation's reveal for the modal.
Markup:
<div class="button" ng-click="modalAddWidget">Add Widget</div>
<div id="modalAddWidget" class="reveal-modal">
<h6>New Widget</h6>
<form>
<fieldset>
<legend>Widget Name</legend>
<input type="text" ng-model="ui.add_widget_value" />
</fieldset>
<div class="small button right" ng-click="addWidget()">Add Widget</div>
<div class="small button right secondary" ng-click="addWidgetCancel()">Cancel</div>
</form>
</div>
Controller:
...
$scope.modalAddWidget = function() {
$("#modalAddWidget").reveal();
}
$scope.addWidget = function() {
$scope.myobject.widgets.push({"name": $scope.ui.add_widget_value});
$scope.ui.add_widget_value = '';
$('#modalAddWidget').trigger('reveal:close');
}
$scope.addBudgetCancel = function() {
$scope.ui.add_widget_value = '';
$('#modalAddWidget').trigger('reveal:close');
}
...
Note: $scope.ui is an object I am using to store UI values that shouldn't be bound to my object until the user actually clicks "Add Widget"
$scope.myobj is where my data is stored.
Foundation's $("#modalAddWidget").reveal(); function presents the modal overlay.
Since I shouldn't be putting my display code inside the controller, what is the proper way to approach this?
You don't want to manipulate the DOM (or even reference it) from your controllers.
A directive is best here.
app.directive('revealModal', function (){
return function(scope, elem, attrs) {
scope.$watch(attrs.revealModal, function(val) {
if(val) {
elem.trigger('reveal:open');
} else {
elem.trigger('reveal:close');
}
});
elem.reveal();
}
});
then in your controller:
$scope.modalAddWidget = function (){
$scope.ui = { add_widget_value: '' };
$scope.showModal = true;
};
$scope.addWidget = function (){
$scope.myobject.widgets.push({"name": $scope.ui.add_widget_value});
$scope.ui.add_widget_value = '';
$scope.showModal = true;
};
And in your HTML
<div class="button" ng-click="modalAddWidget()">Add Widget</div>
<div id="modalAddWidget" class="reveal-modal" reveal-modal="showModal">
<h6>New Widget</h6>
<form name="addWidgetForm" ng-submit="addWidget()">
<fieldset>
<legend>Widget Name</legend>
<input type="text" name="widgetValue" ng-model="ui.add_widget_value" required />
<span ng-show="addWidgetForm.widgetValue.$error.required">required</span>
</fieldset>
<button type="submit" class="small button right">Add Widget</button>
<div class="small button right secondary" ng-click="showModal = false;">Cancel</div>
</form>
</div>
Basically you'd set a boolean in your scope to show and hide your modal. (I'm not sure of reveal modal's open/close mechanism, so I'm guessing in my code above).
ALSO: I went through the effort of adding some validation in there.