I'm trying to add new bootstrap toggle switch dynamically but I don't know how to change the state dynamically. Thanks in advance!
$('.btn').on('click', function () {
var status = true;
for(var i=0; i<3; i++){
$('p').after(
'<input id="newCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
);
console.log(status);
$('.newBSswitch').bootstrapSwitch('state', status);
status = false;
}
});
<p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>
Here is the fiddle: http://jsfiddle.net/icamilo95/8wars2ep/7/
I realized I just had to add different Id's to the inputs and change the class .newBSSwitch for every specific Id like this:
$('.btn').on('click', function () {
var status = true;
for(var i=0; i<5; i++){
$('p').after(
'<input id="newCheckBox'+[i]+'" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
);
console.log(status);
$('#newCheckBox'+[i]).bootstrapSwitch('state', status);
status = false;
}
});
<p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>
Related
I want to add and remove text fields in angularjs with an add button click. And in the right side of the text fields, which were added there should be a remove option. While I click on the remove the text field should delete.
I would solve this using ng-repeat. Have a look at this example:
Edit updated the code:
angular.module("module",[])
.controller("ctrl",function($scope){
$scope.inputList = [];
$scope.add = function(){
$scope.inputList.push({content:""});
};
$scope.remove = function(input){
var idx = $scope.inputList.indexOf(input);
$scope.inputList.splice(idx,1)
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="module" ng-controller="ctrl">
<div ng-repeat="input in inputList">
<input type="text" ng-model="input.content">
<input type="button" ng-click="remove(input)" value="remove">
</div>
<input type="button" ng-click="add()" value="add">
</div>
You can use ng-repeat to achieve this functionality.
You'll have to add an object in a $scope object's array everytime the user presses Add button and removing the object when the user presses - button.
Here's the code sample.
<span ng-click="addTextBox()"> + </span>
<div ng-repeat="textBox in textBoxes">
<input type='text' />
<span ng-click="removeTextBox(textBox.id)"> - </span>
</div>
The controller goes like this
$scope.textBoxes = [];
$scope.addTextBox = function() {
$scope.textBoxes.push({id: $scope.textBoxes.length +1});
}
$scope.removeTextBox = function(id){
var indexToRemove;
for(i = 0; i < $scope.textBoxes.length; i++){
if($scope.textBoxes[i].id === id){
indexToRemove = i;
}
$scope.textBoxes.splice(indexToRemove, 1);
}
}
You can use this simple way:
HTML
<span ng-repeat="hobby in hobbies track by $index">
<div class="form-group">
<input type='text' ng-model='hobbies[$index]' class="form-control pull-right"/>
<button ng-click = "addHobby()" ng-show="$last">+</button>
<button ng-click = "removeHobby($index)" ng-show="hobbies.length > 1">-</button>
</div>
</span>
Angular Controller
$scope.hobbies = [''];
$scope.addHobby = function() {
$scope.hobbies.push('');
}
$scope.removeHobby = function(index) {
if(index >= 0){
$scope.hobbies.splice(index, 1);
}
}
I have a div with ng-repeat:
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="this.value" ng-checked="false">{{fruit.code}} - {{fruit.short_name}}
</div>
Here furits is array object and which contains the field code, short_name.
furits: {
{
code : code_value1,
short_name :short_name_value1
},
{
code : code_value2,
short_name :short_name_value2
},...
{
code : code_value..,
short_name :short_name_value..
},
}
I would like to get the code of checked checkbox after submit button click and insert those codes in new array.
And also send the same array to server to complete the task.
Please help me to solve this issue.
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="fruit.isSelected" />{{fruit.code}} - {{fruit.short_name}}
</div>
<input type="button" ng-click="sendServer()" value="Submit" />
And your controller methods are like ,
$scope.sendServer = function(){
$scope.checkedFruits = [];
for(i = 0; i < $scope.fruits.length; ++i){
if ($scope.fruits[i].isSelected)
$scope.checkedFruits.push(fruit.code);
}
$scope.postData();
}
//Send array to server via web service with parameter FruitsCode
$scope.postData = function () {
$http.post('http://your.webservice/', {FruitsCode:$scope.checkedFruits}).success(
function(data){
$scope.response = data
})
}
Hopes this will help you !
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="fruit.isChecked" />{{fruit.code}} - {{fruit.short_name}}
</div>
<input type="button" ng-click="save()" value="SAVE" />
And inside your controller :
$scope.save = function(){
var myFruits = [];
for(i = 0; i < $scope.fruits.length; ++i){
if ($scope.fruits[i]. isChecked)
myFruits.push(fruit.code);
}
}
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!
I am using ngSwitch directive to switch the view to Edit the div content. HTML is as follows -
<div ng-switch="isEditing" ng-controller="descController">
<div ng-switch-when="true">
<textarea name="Name" rows="8" class="form-control" ng-model="desc"></textarea>
<button class="btn btn-primary" ng-click="saveEdit($parent)">Save</button>
<button class="btn btn-warning" ng-click="cancelEdit($parent);">Cancel</button>
</div>
<div ng-switch-default>
<p class="lead" >{{desc}}</p>
<p><button class="btn btn-mini btn-danger" ng-click="$parent.isEditing = true;">Edit</button></p>
</div>
</div>
The controller code is as follows
home.controller("descController", function($scope, Desc){
(function getAboutMe(){
Desc.getAboutMe().success(function(about){
$scope.desc = about[0].description;
$scope.actualText = about[0].description;
$scope.saveEdit = function($parent){
//$scope.desc = $scope.desc;
$parent.isEditing = false;
}
$scope.cancelEdit = function($parent){
$scope.desc = $scope.actualText;
$parent.isEditing = false;
};
}).error(function(err){
alert(err);
});
})();
});
What I am trying to do is, when the cancel button is pressed I want the original text to be visible on the div and when the save button is clicked I want the new text to be visible on the div. How can i achieve this? I am new to Angular.
Do you need something like this?
$scope.saveEdit = function($parent){
$scope.actualText = $scope.desc; //update actualText before switching to view mode
$parent.isEditing = false;
}
$scope.cancelEdit = function($parent){
$scope.desc = $scope.actualText; //restore des
$parent.isEditing = false;
};
The main problem is ng-switch creates a new scope. Therefore you need to bind to the parent scope in your textarea using $parent:
<textarea name="Name" rows="8" class="form-control" ng-model="$parent.desc"></textarea>
DEMO
I have a button to change the status (STARTED/STOPPED). The button is created in a cell of ng-grid.
The cell is defined as {field:'status', displayName:'Status', cellTemplate: 'cell/statusCellTemplate.html'}] where the template is
<button class="btn btn-primary" ng-click="changeStatus(row.getProperty('id'),'{{row.getProperty(col.field) | switchStatus}}')">{{row.getProperty(col.field)}}</button>
myapp.filter('switchStatus', function() {
return function(input) {
return (input == 'STOPPED') ? 'STARTED' : 'STOPPED';
};
});
In the Plunker, the initial state is STOPPED so the rendered cell is
<button class="btn btn-primary ng-scope ng-binding" ng-click="changeStatus(row.getProperty('id'),'STARTED')">STOPPED</button>
Then clicking the button switch the status as expected and the rendered cell is
<button class="btn btn-primary ng-scope ng-binding" ng-click="changeStatus(row.getProperty('id'),'STOPPED')">STARTED</button>
But clicking the button does not switch the status which is stuck to STARTED whereas the parameter is set to STOPPED.
The Plunker that reproduces the issue.
Edit: Better example
The first answer made it work by removing the filter but I want to keep it. So I created an example where a button is rendered and clicking the button increments the content of the data. The counter is stuck after the first click.
Init: <button class="btn btn-primary ng-scope" ng-click="increment(1)">Increment</button>
Click: <button class="btn btn-primary ng-scope" ng-click="increment(2)">Increment</button>
Click: <button class="btn btn-primary ng-scope" ng-click="increment(2)">Increment</button> Should be increment(3).
The modified Plunker
There were a couple of things that I changed to get this plunker working.
First, in your cell template the changeStatus method didn't need interpolation around the current status. So this:
changeStatus(row.getProperty('id'),'{{row.getProperty(col.field) | switchStatus}}')"
changed to this:
changeStatus(row.getProperty('id'),row.getProperty(col.field))"
Second, you'll notice that I took off the filter inside the cell template. This would have the effect of calling the $filter again and reversing the toggle.
Finally, I noticed that the toggle logic was reversed. So I changed this:
$scope.changeStatus= function(id, status) {
console.log(status);
$scope.currentStatus = status;
if(status == 'STOPPED') {
$scope.myData = [{status: 'STOPPED'}];
} else {
$scope.myData = [{status: 'STARTED'}];
}
$scope.nextStatus = $filter('switchStatus')(status);
}
To this:
$scope.changeStatus= function(id, status) {
console.log(status);
$scope.currentStatus = status;
if(status == 'STOPPED') {
$scope.myData = [{status: 'STARTED'}];
} else {
$scope.myData = [{status: 'STOPPED'}];
}
$scope.nextStatus = $filter('switchStatus')(status);
}
All seems to be working now. Hope this helps.