I'm trying to make 6 buttons that are selectable. I'm having trouble adding more than two. The third button is selecting other buttons and also the buttons are deselecting themselves when clicked twice. Which is undesired. It's a mess. Can anyone help me sort this out?
Here's my code:
<div ng-app="plunker">
<div ng-controller="MainCtrl">
<button type="button" class="btn" ng-class="{'btn-primary':isUploadActive}" ng-click="toggleActive1()">Upload</button>
<button type="button" class="btn" ng-class="{'btn-primary':isDownloadActive}" ng-click="toggleActive2()">Download</button>
</div>
</div>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.button1Active = false;
$scope.button2Active = false;
$scope.button3Active = false;
$scope.button4Active = false;
$scope.button5Active = false;
$scope.button6Active = false;
$scope.toggleActive1 = function() {
if($scope.button2Active) {
$scope.button2Active = !$scope.button2Active;
}
$scope.button1Active = !$scope.button1Active;
};
$scope.toggleActive2 = function() {
if($scope.button1Active) {
$scope.button1Active = !$scope.button1Active;
}
$scope.button2Active = !$scope.button2Active;
};
$scope.toggleActive3 = function() {
if($scope.button3Active) {
$scope.button3Active = $scope.button3Active;
}
$scope.button2Active = !$scope.button2Active;
$scope.button1Active = !$scope.button1Active;
$scope.button4Active = !$scope.button4Active;
$scope.button5Active = !$scope.button5Active;
$scope.button6Active = !$scope.button6Active;
};
});
<div id="contentDiv">
<div ng-app="plunker">
<div ng-controller="MainCtrl">
<button type="button" class="btn" ng-class="{'btn-primary':button1Active}" ng-click="toggleActive1()">Upload</button>
<button type="button" class="btn" ng-class="{'btn-primary':button2Active}" ng-click="toggleActive2()">Download</button>
<button type="button" class="btn" ng-class="{'btn-primary':button3Active}" ng-click="toggleActive3()">Purchased</button>
</div>
</div>
Yikes! that is a bit messy. I made a fiddle that seems to do what you want: http://jsfiddle.net/qwah3/
Basically I just give the controller one scoped object that holds the active button, and each button just checks against that value:
function myCtrl($scope) {
$scope.active = { val : '' };
$scope.Activate = function(buttonVal) {
$scope.active.val = buttonVal;
};
}
That means each button can just be like this:
<button type="button" class="btn" ng-class="{'btn-primary':active.val == 'Download'}"
ng-click="Activate('Download')">Download</button>
You could even turn the button into a directive to make it even easier.
Hope this helped!
Related
var App = angular.module('myApp', []);
App.controller('myPopoverCtrl',
function($scope){
$scope.myPopover = {
isOpen: false,
open: function open() {
$scope.myPopover.isOpen = true;
},
close: function close() {
// alert('hi');
$scope.myPopover.isOpen = false;
}
};
$scope.SaveNotes = function() {
console.log('hi');
console.log($scope.noteText);
//getting undefined here
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "App">
<a uib-popover-template="'AddNote.html'"
popover-title="AddNote"
popover-trigger="'outsideClick'"
ng-controller="myPopoverCtrl"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open()">Add
</a>
</div>
<script type="text/ng-template" id="AddNote.html">
<div>
<textarea class="form-control height-auto"
ng-model="noteText"
placeholder="This is a new note" ></textarea>
<input class="btn btn-outline btn-primary"
type="button"
ng- click="SaveNotes();" value="Save">
</div>
</script>
I have web a page where i have a button and when click the button popover appears.In that popover i have textarea but when i click save button i want get the text in my controller but i am getting undefined using $scope.modelname
How can i get that data?
I think you want to use a modal rather than a popover like so, as a popover is really just to display text :-
var modalInstance = $modal.open({
animation: $rootScope.animationsEnabled,
templateUrl: 'views/myTemplate.html',
size: 'md'
}).result.then(function(result) {
$scope.result = result;
});
This is what it's designed for more info here.
Okay I have multiple scope variables.
I pass them into a toggle function like this.
<button ng-click="controller.toggle(controller.data.variable)">Change</button>
On click I want to change the variable like this
controller.toggle = function(data) {
if(toggled) {
data = 'test';
}
}
Is there any way to achieve this?
I have already searched for solutions but found nothing.
Does this help?
HTML:
<div ng-controller="MainCtrl">
<div>
<button ng-click="toggle('variable1')">Change Variable 1</button>
</div>
<div>
<button ng-click="toggle('variable2')">Change Variable 2</button>
</div>
<pre>variable1: {{variable1}}</pre>
<pre>variable2: {{variable2}}</pre>
</div>
JS:
angular.module('myApp', []).controller('MainCtrl', function($scope) {
$scope.variable1 = 'on';
$scope.variable2 = 'off';
$scope.toggle = function(propName) {
var val = $scope[propName];
$scope[propName] = val === 'on' ? 'off' : 'on';
};
});
UPDATED example (please don't hate me for using eval)
html:
<div ng-controller="MainCtrl">
<div>
<button ng-click="toggle('settings.section.value1')">Change Variable 1</button>
</div>
<div>
<button ng-click="toggle('settings.section.value2')">Change Variable 2</button>
</div>
<pre>variable1: {{settings.section.value1}}</pre>
<pre>variable2: {{settings.section.value2}}</pre>
</div>
js:
angular.module('myApp', []).controller('MainCtrl', function($scope) {
$scope.settings = {
section: {
value1: 'on',
value2: 'off'
}
};
$scope.toggle = function(prop) {
var val = eval("$scope." + prop);
if(val === 'on') {
eval("$scope."+ prop +"= 'off'");
} else {
eval("$scope."+ prop +"= 'on'");
}
};
});
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 am using html5, angularjs, bootstrap. So each one of them gives many options to create a modal window. Whole of my website has 2 things, one is confirmation dialog or form dialog. So which is the best reusable approach. Should i use html5 or create a directive ?
As mentioned in the comments ui-bootstrap Modal is very useful.
Just for an example here is a factory for confirm modal that you can extend according to your use case:
yourApp.factory("dialog", ["$modal",
function($modal) {
var dialogService = {
confirm: function(options) {
var modalInstance = $modal.open({
templateUrl: 'partials/confirm-modal.html',
controller: ['$scope',
function($scope) {
$scope.header = options.header;
$scope.body = options.body;
$scope.confirmText = options.confirmText || "Close";
$scope.cancelText = options.cancelText || "Confirm";
$scope.hideCancelButton = options.hideCancelButton;
$scope.cancel = function() {
modalInstance.dismiss('cancel');
};
$scope.confirm = function() {
modalInstance.close();
};
}
]
});
return modalInstance.result;
}
}
}
])
And here is your template:
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="btn close" ng-click="cancel()">×</button>
<h4 id="noteLabel" class="modal-title">{{header}}</h4>
</div>
<div class="modal-body">
<p ng-bind-html="body" style="font-size: 16px"></p>
</div>
<div class="modal-footer">
<button ng-show="!hideCancelButton" class="btn btn-default" ng-click="cancel()">{{cancelText}}</button>
<button ng-click="confirm()" class="btn btn-primary">{{confirmText}}</button>
</div>
I am using Angularfire and I'd like to remove the items by checkbox.
And there is a button that can do the "checkAll" and another do the "uncheckAll"
HTML
<div ng-app="app" ng-controller="Ctrl">
<li ng-repeat="item in newslist">
<input type="checkbox"> {{item.newsTitle}}
</li>
<br>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="newslist.$remove(item)">Remove</button>
</div>
JS
var app = angular.module("app", ["firebase"]);
app.value('newsURL', 'https://XXX.firebaseio.com/XXX/');
app.factory('newsFactory', function($firebase, newsURL) {
return $firebase(new Firebase(newsURL)).$asArray();
});
app.controller('Ctrl', function($scope, $firebase, newsFactory) {
$scope.newslist = newsFactory;
$scope.checkAll = function() {
};
$scope.uncheckAll = function() {
};
});
plunker here
I don't know how to remove the items by checkbox or how to make the "checkAll" button work.
I will be appreciate if someone could tell me your answer.
Here is function you would need to check/uncheck and for removing items:
$scope.checkAll = function() {
$scope.newslist.forEach(function(el) {
el.checked = true;
$scope.newslist.$save(el);
});
};
$scope.uncheckAll = function() {
$scope.newslist.forEach(function(el) {
el.checked = false;
$scope.newslist.$save(el);
});
}
$scope.remove = function() {
$scope.newslist.forEach(function(item) {
if (item.checked) {
$scope.newslist.$remove(item);
}
});
};
Demo: http://plnkr.co/edit/GsGVsGGjNwW4i1kTOuko?p=preview
I added checked property for ngModel directive.
HTML becomes:
<li ng-repeat="item in newslist">
<input type="checkbox" ng-model="item.checked">{{item.newsTitle}}
</li>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="remove()">Remove</button>