I have problem with my script.
js
$scope.showConfirm = function(e) {
var confirmPopup = $ionicPopup.confirm({
title: 'some title',
template: 'ccccccc'
});
confirmPopup.then(function(res) {
if(res) {
var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
console.log(a);
}
});
};
and html:
<div class="green" data-id="{{mydiv.mydiv_id}}">
<p>some text </p>
<button class="button button-primary" ng-click="showConfirm({{mydiv.mydiv_id}})">
Wykonane
</button>
</div>
Everything works well, id is allocated and when I check the console that also is all okay, but at this stage need to click the button changed class.For example when I'm click "showConfirm()" I need change class in div where data-id = showConfirm(id).
Now my div have class green, when I' click button this class change to red. In jquery the same script view like this:
$(button).on(click, function(e){
var element = $("div[data-id="+e+"]");
element.removeClass(green);
element.addClass(red)
});
How to do it?
EDIT:
I see that I need to add full code to make it clear :)
updated code:
$scope.showConfirm = function(e) {
var confirmPopup = $ionicPopup.confirm({
title: 'title',
template: 'eeeeee'
});
confirmPopup.then(function(res) {
if(res) {
var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
console.log(a);
$http.get("http://example/rest_api/json?id="+e)
.success(function(data){
// if success set green
})
.error(function(){
// if error set red
})
}
});
};
I need change class when my server is success response.
You should do everything in angular way. angular.element is not the right solution.
You can use ng-class of angular.
Example
<i class="fa" ng-class="{'class-name1': condition1 == 'true', 'class-2': condition2== 'true'}"></i>
if condition 1 is true then class-name1 will be added, if condtion2 is true then class-2 class will be added.
HTML
<div ng-class="{'green': buttonClicked == true, 'red': responseInYes== true}">
$scope.showConfirm = function(e) {
$scope.buttonClicked = true;
$scope.responseInYes= false;
var confirmPopup = $ionicPopup.confirm({
title: 'some title',
template: 'ccccccc'
});
confirmPopup.then(function(res) {
if(res) {
$scope.buttonClicked = false;
$scope.responseInYes= true;
}
});
};
I guess you are looking for something like this.
Consider using ng-class instead of class.
For example
You could also do this using objects, and based on your edit it could be something like:
Updating the HTML
<div data-id="{{mydiv.mydiv_id}}" ng-class="conditions[mydiv.mydiv_id] ? 'green' : 'red'">
And in your controller $scope.conditions = {}; and just set it to true or false in your success and error like : $scope.conditions[e] = true /* or false */;
Note. If you want the default to be green just set the condition to true on init or do the validations and settings assuming the expected to be a negative value.
Try updating a property inside mydiv:
<div class="{{mydiv._class}}">
<p>some text </p>
<button class="button button-primary" ng-click="showConfirm(mydiv)">
Wykonane
</button>
</div>
Then, in your function:
$scope.showConfirm = function(e) {
// your popup window and some more code ...
e._class = 'yellow'; // class for fecthing data (waiting server json result)
$http.get(URL).success(function(data) {
e._class = 'green'; // class for success
}).error(function() {
e._class = 'red'; // class for error
});
};
Use ng-class
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
Check this out.
In your case i suggest to do :
$scope.isGreen = false;
$http.get("http://example/rest_api/json?id="+e)
.success(function(data){
$scope.isGreen = true;
})
.error(function(){
})
In your Html file add this:
ng-class="{'class-green': isGreen, 'class-red': !isGreen}"
Related
I want to change the class of a button when it clicked and also reverse back to its former state when its click again
$scope.like_btn = "icon ion-ios-heart";
$scope.like_btn2 = "icon ion-ios-heart assertive";
$scope.likepic=function() {
event.preventDefault();
if ($scope.like_btn === "icon ion-ios-heart"){
$scope.like_btn = "icon ion-ios-heart assertive";
$http.post("http://localhost/mywork/scripts/like.php",
{'u_pic_id':$scope.u_pic_id})
.success(function(data){
console.log(data)
});
}
else {
$scope.like_btn = "icon ion-ios-heart assertive";
$scope.like_btn = "icon ion-ios-heart";
$http.post("http://localhost/mywork/scripts/like_delete.php",
{'u_pic_id':$scope.u_pic_id})
.success(function(data){
console.log(data)
});
}
}
HTML
Click to like
<i ng-class="{ '{{like_btn}}': item.answer==='no liked','{{like_btn2}}':item.answer=='liked' }" ></i> {{item.love_total}} Likes
Your 'item' is probably not getting updated after the service succeeded.
So one way is to add following to the controller:
$scope.item.isLiked = false; // or initiase it with item.isLiked
$scope.likepic=function(item) {
item.isLiked = item.isLiked;
...
...
}
Change your angular expression to the following :
<i ng-click="likepic(item)" ng-class="{ '{{like_btn}}': item.answer=='no liked','{{like_btn2}}': item.answer=='liked' }" ></i>
You need to update the varible names little bit.
As I look at your case, the only change with onclick is that you are adding 'assertive' class. Below would be the approach.
Changes in the HTML View:
Click to like
<i class="icon ion-ios-heart" ng-class="{'assertive': liked}" ></i> {{item.love_total}} Likes
Changes in Javascript
// Initialize the flag here
$scope.liked = false;
$scope.likepic = function() {
event.preventDefault();
// Toggle the flag here
$scope.liked = !$scope.liked;
// Then perform task as per the new value
// There is some possibility of optimization below too. But since that is not the question, no changes are done here
if ($scope.liked) {
$http.post("http://localhost/mywork/scripts/like.php", { 'u_pic_id': $scope.u_pic_id })
.success(function(data) {
console.log(data)
});
} else {
$http.post("http://localhost/mywork/scripts/like_delete.php", { 'u_pic_id': $scope.u_pic_id })
.success(function(data) {
console.log(data)
});
}
}
i want to add class to multiple divs after click on button.
here is my code :
$scope.noneStyle = "noneVisible";
$scope.bodyCon = "notRotate";
$scope.addStyle = function () {
if ($scope.noneStyle === "noneVisible" && $scope.bodyCon ==="notRotate") {
$scope.noneStyle = "visibleStyle";
$scope.bodyCon = "rotate";
}
else
$scope.noneStyle = "noneVisible";
$scope.bodyCon = "notrotate";
}
HTML
Click
<aside class="rightbar {{noneStyle}} {{visibleStyle}}"></aside>
<div class="container-fluid {{bodyCon}} {{rotate}}"></div>
here is the Demo:http://jsfiddle.net/sadeghbayan/dbnb2f9x/
You are trying to print scope variables in your markup visibleStyle and rotate that are not defined in the scope.
You are using these names as strings, not javascript variables. Fix this, and everything should work fine.
The reason why your solution isn't working, is because the {{noneStyle}} is immediately parsed as text.
You can use ng-class to achieve this.
I've edited your JsFiddle to achieve this:
http://jsfiddle.net/dbnb2f9x/3/
myApp.controller('mainCtrl', function ($scope) {
$scope.noneStyle = false;
$scope.bodyCon = false;
//Toggle the styles
$scope.toggleStyle = function () {
//If they are true, they will become false
//and false will become true
$scope.bodyCon = !$scope.bodyCon;
$scope.noneStyle = !$scope.noneStyle;
}
});
and in the HTML:
<div ng-app="myApp" ng-controller="mainCtrl">
Click
<aside ng-class="{'noneStyle' : noneStyle}"class="rightbar"></aside>
<div ng-class="{'bodyCon' : bodyCon}" class="container-fluid"></div>
</div>
when the bodyCon $scope variable is true, the class 'bodyCon' will be added to the div because of this rule:
ng-class="{'bodyCon' : bodyCon}"
You can add mutliple statements:
ng-class="{'bodyCon' : bodyCon, 'helloWorldClass' : myVariable == 'helloWorld'}"
In above example the class: "helloWorldClass" will be added when $scope.myVariable equals 'helloWorld'
Hope this helps you with your problem!
I want to get the console.log to output true or false on click of .icons div.
Here is some live code: codepen
I have a model called navigation
$scope.navigation = {
status: false;
}
And a big object that will toggle the ui
$scope.toggle = {
menu: function() {
$scope.navigation.status = !$scope.navigation.status;
alert($scope.navigation.status);
}
};
The trigger is an ng-click="open.menu()" :
<div class="icons " ng-repeat="(key, val) in squares" ng-style="perspective" ng-click="toggle.menu()">
Try:
toggle.menu()
instead of
open.menu()
I am displaying datas in a grid ,on click of active or inactive button i have to change the button ,functionality is working fine ,for changing icon i am unable to find the active clicked button ,in jquery we can use "this" ,but no idea in angular js ,pls help
$scope.activeSource = function(datasource,status)
{
$scope.loading = true;
$scope.activeInfo = {
datasource:datasource,
};
$scope.alerts = [];
if(status == "Stopped")
{
$scope.entityService.activeInfo($scope.activeInfo,
function( msg ) // success
{
$scope.loading = false;
$rootScope.successMsg.push(msg);
$('.icon-play').hide(); // this.
$('.icon-stop').show(); // this. no idea
},
function( msg ) // error
{
$scope.loading = false;
$rootScope.successMsg.push(msg);
}
);
You don't need to use this to access the button. Instead, in your controller create a javascript object that holds all the attributes for the button. Something like this:
$scope.myButton = {
src : 'foobar.png',
isVisible : true
};
Then, define your button like this:
<img ng-src="myButton.src" ng-show="myButton.isVisible" />
Now, when you want to modify any attribute of the button, you just need to change the javascript object myButton, and angular will take care of updating the actual button.
For example, if you want to hide the button:
// you don't need to do this
// $('#myButton').hide();
// instead just do this
$scope.myButton.isVisible = false;
Similarly, you can change the src of the image as well.
I am trying to use a button as a switch. If I click on the button the value and id changes. If I click on the button again it goes back to original value and id.
Original values could look like this:
value="Show all" id="showall"
Changed to this values
value="Standard" id="default"
<script>
$(function () {
$("#showall").click(function () {
$("#showall") // change the Value text to Standard on the button
$("#showall") // Change ID value to default on the button
});
$("#default").click(function () {
$("#default") // change value back to the original which is "Show all"
$("#default") // change ID back to original which is "Showall"
});
</script>
Assuming this button is within some type of <div class="container"></div> where we can handle its event (You could handle it from the body, or document as well, though that's not advised):
$(".container").on("click", "#showall, #default", function(){
var props = this.id === "showall"
? { value:'Standard', id:'default' }
: { value:'Show All', id:'showall' };
$(this).attr( props );
});
Demo: http://jsbin.com/eravoq/2/edit
$("#showall").on('click', function () {
$(this).attr({ 'value': 'Standard', 'id': 'default' });
});
$("#default").on('click', function () {
$(this).attr({ 'value': 'Show all', 'id': 'showall' });
});
why would you change the ID of the button ?
You could do something like that :
$(function () {
$("#switchButton").click(function(){
if($(this).value == "default"){
$(this).value = "Show all";
// do other stuff
}else if($(this).value == "Show all"){
$(this).value = "default";
// do other stuff
}
});
});
$("#showall").on('click', function() {
this.id = this.id=='showall' ? 'default' : 'showall';
this.value = this.value=='Standard' ? 'Show All' : 'Standard';
});
FIDDLE
I know is not exactly what you are asking but if we go an step back in your question I think what you really want is to toggle between two buttons so I think is very much maintainable, understandable, intuitive and a lot of more things to just having two well formed buttons and show/hide then alternatively:
<style>
button#default{
display: none;
}
</style>
<button id="showall" value="Show all">Show all</button>
<button id="default" value="Standard">Standard</button>
<script>
function toggleButtons(){
$("button#showall, button#default").toggle();
}
$("button#showall, button#default").click( toggleButtons );
</script>
Check the jsFiddle
You should be using a class toggle instead of changing IDs.
http://jsfiddle.net/JzMnM/
if (that.hasClass('foo')) {
that.removeClass('foo').addClass('bar').val('bar');
} else {
that.removeClass('bar').addClass('foo').val('foo');
}