<span ng-click="resetbyTask() || filterTask(task.id, $index)">{{ task.total }}</span>
I am trying to toggle between fucntions in a single ng-click so that the first click will run filterTask() and when clicked again it will run resetbyTask
Try this :
// controller
var called = false;
$scope.toggle = function (taskId, index) {
if (called) { called = false; return $scope.resetbyTask(); }
$scope.filterTask(taskId, index);
called = true;
}
HTML :
<span ng-click="toggle(task.id, $index)">{{ task.total }}</span>
Related
I am trying to create clickable legends. I am using flot chart and legendFormatter to manipulate the legends. Here is my code in js file:
$scope.labelFormatter = function (label, series) {
return "<div class='col-md-12' style='font-size:12px;'><span>" + label + "</span><span ng-click=\"removeFromFunnel(" + (series.data[0][0] - 1) + ")\" class=\"criteriaClose\">✖</span></div>";
};
pageData.barChartOptions.legend = {show: true, labelFormatter: $scope.labelFormatter, noColumns: index};
$scope.removeFromFunnel = function (index) {
if (index > -1) {
pageData.funnel.splice(index, 1);
}
};
This way, the program does not seem to recognize ng-click. I also tried to use onClick but I think the function needs to be out of scope with that way.
Why is ng-click not working? What should I use instead of it?
Thanks for your help.
<div style="display:none"><input type="button" value="" id="rid" ng-click="removeFromFunnel()" /></div>
<div style="display:none"><input type="hiden" value="" id="hid"/></div>
The beloow is the js code
function remove(value)
{
document.getElementById("hid").value = value;
var btn = document.getElementById("rid");
btn.click();
}
you can collect the value in the angular function removeFromFunnel()
$scope.removeFromFunnel()
{
var value = angular.element(document.querySelector('#hid'));
//do your work with the value
}
Hi I am trying to change color as well as text of a button i.e. switch between two texts & colors. Suspend/unsuspend text and red/green color.
What I want to do is for the moment (because later, server will give info about whether user is suspended or not) randomly give them any one of these two texts&colors, and I click on button it should turn to other text & color.
I tried but I am wrong somewhere and I cant find it. Please help. And if there is any better way then please suggest to me, I am new to angular.
HTML:
<button type="button" class="btn btn-danger" ng-if="checkStatus(person.isSuspended)" ng-click="person.isSuspend=suspendUser(!person.isSuspend)">{{suspendText}}</button>
<button type="button" class="btn btn-primary" ng-if="checkStatus(!person.isSuspended)" ng-click="person.isSuspend=suspendUser(person.isSuspend)">{{suspendText}}</button>
Javascript:
$scope.checkStatus = function (bool) {
if (bool) {
$scope.suspendText = "UNSUSPEND"
return true;
} else {
$scope.suspendText = "SUSPEND"
return false;
}
}
$scope.suspendUser = function (bool) {
if (bool) {
if ($window.confirm("Are You Sure Want to Unsuspend ?")) {
$scope.suspendText = "SUSPEND"
return !bool;
}
else {
return bool;
}
} else {
if ($window.confirm("Are You Sure Want to Suspend ?")) {
$scope.suspendText = "UNSUSPEND"
return !bool;
} else {
return bool;
}
}
}
Check this Plunkr: http://plnkr.co/edit/DEbTtpwu749sVT6iSojd?p=preview
Asumming you are through a User List with name & status (boolean true: Active - false: inactive):
user = {name:'John', status: true}
Here you can check how change the status, text & button color. In a short angular Way.
<li ng-repeat="user in users">
({{ user.active ? 'Active' : 'Inactive'}})
{{ user.name }}
<div ng-class="user.active? 'btn btn-danger' : 'btn btn-primary' " ng-click="user.active=!user.active">
{{ user.active ? 'Suspend' : 'Unsuspend'}}
</div>
</li>
<body ng-controller="MainCtrl as vm">
<button class="btn"
ng-class="{ 'btn-primary': vm.isSuspended , 'btn-danger': !vm.isSuspended }"
ng-bind="vm.text"
ng-click="vm.toggleSuspend()">
</button>
</body>
angular.module('app', [])
.controller('MainCtrl', function() {
var vm = this;
vm.toggleSuspend = function() {
vm.isSuspended = !vm.isSuspended;
vm.text = vm.isSuspended ? 'unsuspend' : 'suspend';
};
vm.isSuspended = true;
vm.toggleSuspend();
});
You will just need one button instead of two. A better way of showing the colors would be using ng-class, where you can write expressions to toggle the class.
<button type="button" class="btn" ng-class="person.isSuspended? 'btn-danger':'btn-success'" ng-click="person.isSuspended = !person.isSuspended">{{suspendText}}</button>
Note the way ng-class is written. I am using ternary operator to check if person.isSuspeneded is true, if it is, apply the class btn-danger, else apply btn-success. Now you have got a way cleaner code.
Attached is the plnkr - http://plnkr.co/edit/Uk2rHFacMFLbXyxGzK1b?p=preview
Try to replace your ng-if with ng-show in button.
<div ng-controller="MyCtrl">
<button type="button" class="btn btn-danger"
ng-show="person.isSuspend"
ng-click="person.isSuspend=suspendUser(!person.isSuspend)">{{suspendText}}</button>
<button type="button" class="btn btn-primary"
ng-show="!person.isSuspend"
ng-click="person.isSuspend=suspendUser(person.isSuspend)">{{suspendText}}</button>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $window) {
// first you need to initialize your scope if you didn't
$scope.person = {
isSuspend: false
};
$scope.suspendText = "SUSPEND";
$scope.suspendUser = function (bool) {
if (bool) {
if ($window.confirm("Are You Sure Want to Unsuspend ?")) {
$scope.suspendText = "SUSPEND"
$scope.person.isSuspended = false;
}
else {
$scope.person.isSuspended = true;
}
} else {
if ($window.confirm("Are You Sure Want to Suspend ?")) {
$scope.suspendText = "UNSUSPEND"
$scope.person.isSuspended = true;
} else {
$scope.person.isSuspended = false;
}
}
}
}
angular change button text
This may be very simple but I can't seem to be able to successfully get the logic I want.
<div class="group-title" ng-class="{'group-hasError': !isValid(orderItem)}">
As you can see I'm adding a class group-hasError if the function isValid(orderItem) returns false.
Now the issue is that this is called on page load. But I don't want to call this function on page load rather when a submit button is called
<button id="add_modified_item" ng-click="isValid(orderItem)" class="btn btn-primary btn-fixed-medium pull-right">
How can I achieve this?
This is the function;
$scope.isValid = function(orderItem) {
var count = 0;
//By default make it true
var IsAllSelected = true;
angular.forEach(orderItem.menu_modifier_groups, function(group) {
var count = 0;
angular.forEach(group.menu_modifier_items, function(item) {
count += item.selected ? 1 : 0;
});
if (count == group.max_selection_points) {
IsAllSelected = true;
} else {
//if one item failed All select do return false
IsAllSelected = false;
}
});
return IsAllSelected;
}
Any advice appreciated
Defalut set
$scope.setValidClass=false;
View
<div class="group-title" ng-class="(setValidClass)? 'group-hasError':'')}">
set model with
//if IsAllSelected=false then set IsAllSelected to true
$scope.setValidClass=!IsAllSelected;
return IsAllSelected;
I am using the following directive for 'add tag' functionality in my application:
directives.addTag = function ($http) {
return {
link: function (scope, element, attrs) {
element.bind('keypress', function (event) {
if (event.keyCode == 13) { /*If enter key pressed*/
if (!scope.$parent.post) { //For KShare
var newTagId = "tagToNote";
}
else { //For KB
var newTagId = "tagToAddFor" + scope.post.meta.id;
}
var tagValue = element[0].value;
if (tagValue == "")
return;
if (!scope.$parent.post) {
scope.$parent.tags.push(tagValue);
scope.addTagButtonClicked = false;
}
else {
scope.post.tags.push(tagValue);
scope.addTagButtonClicked = false;
}
scope.$apply();
element[0].value = "";
}
});
}
}
}
This is the HTML code for rendering the tags:
<div class="tagAdditionSpan" ng-repeat="tag in post.tags" ng-mouseenter="hover = true" ng-mouseleave="hover = false">
<span>{{tag}}</span>
<span class="deleteIconSpan" ng-class="{deleteTagIcon: hover}" ng-click="$parent.deleteTag($index,$parent.$index);"></span>
</div>
I have a textbox to add tags when a user types the name of the tag in it and presses 'Enter' key. On page load, I am statically populating 1 tag into the 'tags' array.
I am even able to add tags using the tags and it is reflected in the view. However after adding 2 or 3 tags, it starts misbehaving and the view is no longer updated with the added tags.
I tried debugging this and found that it is being updated in the 'scope.post.tags' array but is not reflected in the view.
What am I doing wrong?
Based on the comments received, I was able to solve the issue. 'ng-repeat' used to break the loop on addition of duplicate tags and hence the view was not updated accordingly.
This fixed the issue(added 'track by' in ng-repeat):
<div class="tagAdditionSpan" ng-repeat="tag in post.tags track by $index" ng-mouseenter="hover = true" ng-mouseleave="hover = false">
<span>{{tag}}</span>
<span class="deleteIconSpan" ng-class="{deleteTagIcon: hover}" ng-click="$parent.deleteTag($index,$parent.$index);"></span>
</div>
i am new to angularjs. i have created list using ng-repeat. just i want to hide the selected list element from list:
html code which i prefered:
<ul>
<li ng-repeat="profile in profileMenu">
<div class="hederMenu" ng-hide="configureDisplay" ng-click="setProfile(profile.name)">
<a class="anchor" style="width:100%" >{{profile.name}}</a>
</div>
</li>
</ul>
here is controller code
$scope.profileMenu = [{
name : "My Profile"
}, {
name : "Configure"
}, {
name : "Logout"
}
];
$scope.profile = "";
$scope.setProfile = function (test) {
$scope.profileSelected = test;
if ($scope.profileSelected == "Configure") {
$location.path("/home/configure"); // if user click configure then this element will hide
$scope.configureDisplay = true;
}
if ($scope.profileSelected == "My Profile") {
$location.path("/home/dashboard");
$scope.configureDisplay = false;
}
if ($scope.profileSelected == "Logout") {
window.location.assign("http://mitesh.demoilab.pune/")
}
return $scope.profileSelected = test;
}
You have to set the configureDisplay property on the actual "Configure" profile item. Not sure what you're doing with the selection list, but I assume you would want the "Configure" item visible again when selecting another item. Therefore you'll also have to reset the "Configure" item back to false when selecting another item.
I modified your example a bit. Notice instead of passing the profile.name on setProfile, i'm passing the profile object. This just simplifies the interaction.
<ul>
<li ng-repeat="profile in profileMenu">
<div class="hederMenu" ng-hide="profile.configureDisplay" ng-click="setProfile(profile)">
<a class="anchor" style="width:100%" >{{profile.name}}</a>
</div>
</li>
</ul>
$scope.setProfile = function (selectedProfile) {
//reset the items
for (var i in $scope.profileMenu) {
$scope.profileMenu[i].configureDisplay = false;
}
if (selectedProfile.name == "Configure") {
$location.path("/home/configure"); // if user click configure then this element will hide
selectedProfile.configureDisplay = true;
}
if (selectedProfile.name == "My Profile") {
$location.path("/home/dashboard");
}
if (selectedProfile.name == "Logout") {
window.location.assign("http://mitesh.demoilab.pune/")
}
return true;
}
you need to do few changes ,
<li ng-repeat="profile in profileMenu">
<div class="hederMenu" ng-hide="profile.configureDisplay" ng-click="setProfile(profile)">
<a class="anchor" style="width:100%" >{{profile.name}}</a>
</div>
</li>
And in controler,
$scope.setProfile = function (test) {
$scope.profileSelected = test.name;
if ($scope.profileSelected == "Configure") {
$location.path("/home/configure");
test.configureDisplay = true;
}
if ($scope.profileSelected == "My Profile") {
$location.path("/home/dashboard");
test.configureDisplay = false;
}
if ($scope.profileSelected == "Logout") {
window.location.assign("http://mitesh.demoilab.pune/")
}
return test;
}