Develop Reference

Simple calculator in html/javascript

I'm trying to make a calculator with html and JavaScript. After clicking on the button i'm trying to insert the number into my div. When i do so the default '0' disappears and it does not insert anything at all.
function copy(event) {
var newValue = event.target.value;
document.querySelector("#display").innerHTML = newValue;
}
var textfield = document.querySelector("#btn_7");
textfield.addEventListener("click", copy);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frame">
<div id="display">0</div>
<button id="btn_7">7</button>
<button id="btn_8">8</button>
<button id="btn_9">9</button>
<button id="btn_div">/</button>
<button id="btn_4">4</button>
<button id="btn_5">5</button>
<button id="btn_6">6</button>
<button id="btn_prod">*</button>
<button id="btn_1">1</button>
<button id="btn_2">2</button>
<button id="btn_3">3</button>
<button id="btn_min">-</button>
<button id="btn_clear">C</button>
<button id="btn_0">0</button>
<button id="btn_eq">=</button>
<button id="btn_plus">+</button>
</div>
If I add a string to newValue variable it shows in my div. So it means like when I press on the button it doesnt give anything to the div. Is there a way to solve this?
And about var textfield = document.querySelector("#btn_7");
For now I have to make this for each button and thats will take a lot of rows is there a better way to do so?

Buttons don't have a default attribute value, so in this case use the attribute textContent.
I recommend you to use a hidden input to store the values or you can also use data-attributes.
For now i have to make this for each button and that will take alot of rows is there a better way to do so?
You can use the function document.querySelectorAll(selector) and loop over it to bind the specific event.
function copy(event) {
var newValue = event.target.textContent;
document.querySelector("#display").innerHTML = newValue;
}
Array.prototype.forEach.call(document.querySelectorAll('button'), function(b) {
b.addEventListener("click", copy);
});
<div id="frame">
<div id="display">0</div>
<button id="btn_7">7</button>
<button id="btn_8">8</button>
<button id="btn_9">9</button>
<button id="btn_div">/</button>
<button id="btn_4">4</button>
<button id="btn_5">5</button>
<button id="btn_6">6</button>
<button id="btn_prod">*</button>
<button id="btn_1">1</button>
<button id="btn_2">2</button>
<button id="btn_3">3</button>
<button id="btn_min">-</button>
<button id="btn_clear">C</button>
<button id="btn_0">0</button>
<button id="btn_eq">=</button>
<button id="btn_plus">+</button>
</div>

try like this
$(function(){
$('button[id^="btn_"]').click(function(){
var display;
if($('.tmp').length > 0){
display = $('.tmp').text();
}else{
$( "<p class='tmp' style='display:none;'></p>" ).appendTo( "#frame" );
display = '';
}
switch($(this).text()){
case 'C' :
display = '0';
break;
case '=' :
display = eval(display);
break;
default :
display = display.concat($(this).text());
}
$('#display').text(display);
$('.tmp').text((display != '0') ? display : '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="frame">
<div id="display">0</div>
<button id="btn_7">7</button>
<button id="btn_8">8</button>
<button id="btn_9">9</button>
<button id="btn_div">/</button><br/>
<button id="btn_4">4</button>
<button id="btn_5">5</button>
<button id="btn_6">6</button>
<button id="btn_prod">*</button><br/>
<button id="btn_1">1</button>
<button id="btn_2">2</button>
<button id="btn_3">3</button>
<button id="btn_min">-</button><br/>
<button id="btn_clear">C</button>
<button id="btn_0">0</button>
<button id="btn_eq">=</button>
<button id="btn_plus">+</button>
</div>

Here is to select value and replace html of display div. You need to do some extra stuff to achieve what is your desired output.
var display = $('#display');
$('.btn').click(function(e) {
var btn = e.target;
display.html(btn.id);
});
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<div id="frame">
<div id="display">0</div>
<button class="btn" id="btn_7">7</button>
<button class="btn" id="btn_8">8</button>
<button class="btn" id="btn_9">9</button>
<button class="btn" id="btn_div">/</button>
<button class="btn" id="btn_4">4</button>
<button class="btn" id="btn_5">5</button>
<button class="btn" id="btn_6">6</button>
<button class="btn" id="btn_prod">*</button>
<button class="btn" id="btn_1">1</button>
<button class="btn" id="btn_2">2</button>
<button class="btn" id="btn_3">3</button>
<button class="btn" id="btn_min">-</button>
<button class="btn" id="btn_clear">C</button>
<button class="btn" id="btn_0">0</button>
<button class="btn" id="btn_eq">=</button>
<button class="btn" id="btn_plus">+</button>
</div>

cancel button not working when editing a ng-repeat item (in a modal) using angular copy

I have created a ng-repeat of blocks where I would like to edit a block in a modal window and cancel the window to discard any changes.
I have managed to get the modal window working and editing blocks as I want however I am trying to use angular.copy to create a backup of the original element and set it when cancel is clicked.
here is my html for my ng-repeat:
<div class="container" style="max-width: 600px;">
<div ng-repeat="block in blocks" class="text-muted" ng-drop="true" ng-drop-success="onDropComplete($index, $data ,$event)">
<div class="row" ng-show="textBlock(block)" ng-click="showEditButtons()" ng-drag="true" ng-drag-data="block">
<h4> {{ block.title }} </h4>
<p> {{ block.body }} </p>
<button class="btn btn-default" ng-show="showButtons" ng-click="editBlock(block); modalUpdate(block)">Edit!</button>
<button class="btn btn-default" ng-show="showButtons" ng-click="deleteBlock(block)">Delete!</button><br>
<br>
</div>
</div>
</div>
and here is my html for the modal:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="block.title" ng-model="titleText"/>
<input class="form-control" placeholder="Main Body" type="text" ng-model="block.body" ng-model="bodyText"/>
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
and here is the modal part of the controller:
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
$scope.saveBlock = function () {
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
block = $scope.backUp;
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
However every time I click cancel the changes to the block are still saved and nothing is reverted.
Any help would be awesome!

Try to remove the line
$scope.cancel = function () {
// block = $scope.backUp; <--- this one
$uibModalInstance.dismiss('cancel');
};

controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
// the above line does not create new instance of $scope.block instead links to block, so whenever $scope.block gets updated, block also gets updated
Change Your code as :
HTML :
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="data.title" ng-model="titleText" />
<input class="form-control" placeholder="Main Body" type="text" ng-model="data.body" ng-model="bodyText" />
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
Have changed ng-model to bind to data object
JS :
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function ($scope, $uibModalInstance, block) {
$scope.data = {};
$scope.data.title = block.title;
$scope.data.body = block.body;
$scope.saveBlock = function () {
block.title = $scope.data.title;
block.body = $scope.data.body;
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
Have assigned to $scope.block only if saveBlock is triggered otherwise nothing happens on cancel

Can't hide div in angularjs

When clicking module class it shows emptylabel. but i cant hide the module class.
<div id="b" class="tab-pane fade in active" >
<div class="secondrow">
<div ng-show="divshow">
<label class="emptylabel"> <input type="button" value="back" class="backbutton" ng-click="hidediv()"></label>
</div>
<div class="module">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
<div class="col-sm-4"><label>Jawaharlal Nehru</label></div>
<div class="col-sm-1"><label>111111</label></div>
<div class="col-sm-2"><label>2222222</label></div>
<div class="col-sm-3"><label>3333333</label></div>
</a>
</div>
Controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
$scope.module = false;
}
// Hide Div
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);

I'm not sure if I understand your question correctly. If you want to toggle between the emptylabel and module, the you can use ng-show for both of them, based on the divshow variable:
<div ng-show="divshow">
<label class="emptylabel">
<input type="button" value="back" class="backbutton" ng-click="hidediv()">
</label>
</div>
<div class="module" ng-show="!divshow">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
...
</a>
</div>
controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
}
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);

What does your ng-controller declaration in the HTML look like? For example mine usually look something like this, with the capture variable 'vm':
<div data-ng-controller="FooController as vm">
<div>
<span data-ng-click="vm.showDiv()"></span>
</div>
</div>
Inside your controller:
function FooController() {
var vm = this;
vm.showDiv = showDiv;
function showdiv() {
// Your code here
}
}

How to properly use ng-init with ng-class

I have a row of buttons and want to initialize the first button as active (as the data associated with it is loaded in my controller's init function). The below HTML works great, but when I click the other two buttons the 'active' class remains on the first button. I want this button set as active on page load and then treated 'normally' (ie: if a different button is clicked remove active class from first button):
<div class="btn-group btn-group-sm">
<button class="btn btn-default" ng-class="{active : isActive}" ng-init="isActive = true" type="button" ng-click="playerMap.clusterToggle(true)">Clustered</button>
<button class="btn btn-default" type="button" ng-click="playerMap.clusterToggle(false)">Unclustered</button>
<button class="btn btn-default" type="button" id="heatmap" ng-click="playerMap.heatmap()">Heatmap</button>
</div>

Should be simple as:
If you are using a loop then its even clean - just pass the index.
<button class="btn btn-default" ng-class="isActive[0] ? 'active' : ''" ng-init="isActive[0]=true" type="button" ng-click="toggleButton(isActive,0)">Clustered</button>
<button class="btn btn-default" ng-class="isActive[1] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,1)">Unclustered</button>
<button class="btn btn-default" ng-class="isActive[2] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,2)">Heatmap</button>

Though this does not answer your initial question, here is a working solution (not very efficient I have to say):
HTML:
<div class='container' ng-controller="GoingStack">
<div switch class="button" ng-class="{'active-button': state}">1</div>
<div switch class="button">2</div>
<div switch class="button">3</div>
</div>
Script:
app.controller('GoingStack', ['$scope', function($scope) {
$scope.state = true;
}]);
var active = document.getElementsByClassName('button');
app.directive("switch", [function() {
return {
link: function(scope, element, attr) {
element.bind('click', function(e){
scope.state = false;
active[0].classList.remove('active-button');
element.addClass('active-button');
});
}
}
}]);

how to generate list dynamically in angular.js

can you please tell me how to create list dynamically in angulat.js..Actullly I am able to make list when user press add button and fill the field .
In other words ,Please check this fiddle whenever you fill the fields it generate a row.And you can get Id when you click the row .Fiddle http://jsfiddle.net/wc4Jm/6/
Now I am trying to do this using bootstrap model .in other words on button click first I show a pop up screen then there is "add" button .on click that it generate the row.but I am getting "undefined".My I insert the model div inside the controller ? here is
http://jsbin.com/vubojoxo/4/
Why I am getting this error ?
XMLHttpRequest cannot load file:///C:/Users/asd/Desktop/angular/angularproject/dialog.html. Received an invalid response. Origin 'null' is therefore not allowed access.
I am getting this error when I used plunker..and run in my desktop ..
I make this html ?
<!doctype html>
<html ng-app="plunker">
<head>
<script src="angular.js"></script>
<script src="ui-bootstrap-tpls-0.2.0.js"></script>
<link href="bootstrap-combined.min.css" rel="stylesheet">
<script src="index.js"></script>
</head>
<body>
<div ng-controller="DialogDemoCtrl">
<a class="btn" data-toggle="modal" href="" ng-click="openPopupScreen()">Add Contend</a>
</div>
</body>
</html>
....
Dialog.html
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h1>Add Element</h1>
</div>
<div class="modal-body">
<form >
<label>Name:</label><input type="text" class="span3" ng-model="activeItem.name"></br>
<label>Content Name:</label><input type="password" class="span3" ng-model="activeItem.content"></br>
<button type="submit" class="btn btn-success" ng-click="addItem()">Add In List</button>
<button type="reset" class="btn ">Clear</button>
</form>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" aria-hidden="true">close</a>
</div>
js code:
var myApp = angular.module('plunker', ['ui.bootstrap']);
myApp.controller('DialogDemoCtrl', function($scope,$dialog) {
$scope.items = [];
$scope.activeItem = {
id:'',
name: '',
content: ''
};
$scope.addItem = function () {
$scope.activeItem.id = $scope.items.length + 1;
$scope.items.push($scope.activeItem);
$scope.activeItem = {}; /* reset active item*/
};
$scope.getId = function (item) {
alert('ID: '+item.id);
};
$scope.openPopupScreen = function () {
alert('Check Open pop up screen');
$dialog.dialog({}).open('dialog.html');
};
});

Check this Plunker
In this example i used angular-ui library which wraps bootstrap's modal to angular
based on this StackOverflow Answer
ModalDemoCtrl
$scope.items = [];
$scope.getId = function(item) {
alert('ID: ' + item.id);
};
// This opens a Bootstrap modal
$scope.open = function() {
var modalInstance = $modal.open({
template: $scope.modal_html_template,
controller: ModalInstanceCtrl
});
modalInstance.result.then(function(newItem) {
// On modal success
newItem.id = $scope.items.length + 1;
$scope.items.push(newItem);
}, function() {
// On modal cancelation
});
}
ModalInstanceCtrl
$scope.name = '';
$scope.content = '';
$scope.ok = function() {
var response = {
'name': $scope.name,
'content': $scope.content
};
$modalInstance.close(response);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
HTML
<body>
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind="" inner-html="modal_html_template" class="hidden">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<!-- using $parent because ui-bootstrap nested 2 controllers. this is a workaround -->
<input type="text" class="form-control" ng-model="$parent.name" placeholder="Enter Name">
</div>
<div class="form-group">
<label>Content</label>
<!-- using $parent because ui-bootstrap nested 2 controllers. this is a workaround -->
<input type="text" class="form-control" ng-model="$parent.content" placeholder="Enter Content">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
<div class="container">
<h2>Modal Example https://stackoverflow.com/questions/24988561</h2>
<button class="btn" ng-click="open()">Open Modal</button>
<div>
<ul>
<li ng-repeat="item in items">
<a ng-click="getId(item)">{{ item.id }} | {{ item.name + ' ' + item.content }}</a>
</li>
</ul>
</div>
</div>
</div>
</body>