In AngularJs Tutorial I have built a simple Calculator but when I click on calculate button it does not show the output. I am not sure where I am doing the mistake. The HTML file has three text input fields and five buttons. When I click on calculate button the output doesn't appear
My HTML file code
<!DOCTYPE html>
<html data-ng-app="calc">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div align="center" data-ng-controller="CalcCtrl as c1">
<input type="text" data-ng-model="c1.num1"></input>
<span data-ng-bind="c1.selectedOperation"></span>
<input type="text" data-ng-model="c1.num2"></input>
<span></span>
<input type="text">{{c1.result}}</input>
<p>
<button data-ng-click="c1.buttonClicked('+')">+</button>
<button data-ng-click="c1.buttonClicked('-')">-</button>
<button data-ng-click="c1.buttonClicked('*')">*</button>
<button data-ng-click="c1.buttonClicked('/')">/</button>
</p>
<p>
<button data-ng-click="c1.calcResult()">calculate</button>
</p>
{{c1.num1}} {{c1.num2}}
</div>
</body>
</html>
My App.JS file
var app = angular.module("calc", []);
app.controller('CalcCtrl', calc);
function calc() {
this.result = 0;
this.buttonClicked = function(button){
this.selectedOperation=button;
}
this.calcResult=function(){
var1 n1=parseFloat(this.num1);
var2 n2=parseFloat(this.num2);
if(this.selectedOperation==='+') {
this.result = n1+n2;
}else if(this.selectedOperation==='-') {
this.result = n1-n2;
}else if(this.selectedOperation==='*') {
this.result = n1*n2;
}else if(this.selectedOperation==='\') {
this.result = n1/n2;
}
}
}
I don't know what are the changes I did from your code, because I have changed more code and added some features. You can just copy paste this below snippet.
Working Snippet
angular.module("calc",[]).controller('CalcCtrl', function($scope) {
$scope.result = 0;
$scope.buttonClicked = function(button){
this.selectedOperation=button;
};
$scope.calcResult = function(){
var n1 = parseFloat($scope.num1);
var n2 = parseFloat($scope.num2);
if($scope.selectedOperation==='+') {
$scope.result = n1+n2;
}else if($scope.selectedOperation==='-') {
$scope.result = n1-n2;
}else if($scope.selectedOperation==='*') {
$scope.result = n1*n2;
}else if($scope.selectedOperation==='/') {
$scope.result = n1/n2;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="calc" align="center" ng-controller="CalcCtrl">
<input type="text" ng-change="calcResult()" ng-model="num1"></input>
<span ng-bind="selectedOperation"></span>
<input type="text" ng-change="calcResult()" ng-model="num2"></input>
<span></span>
<input type="text" ng-model="result"></input>
<p>
<button ng-click="buttonClicked('+');calcResult()">+</button>
<button ng-click="buttonClicked('-');calcResult()">-</button>
<button ng-click="buttonClicked('*');calcResult()">*</button>
<button ng-click="buttonClicked('/');calcResult()">/</button>
</p>
<p>
<button ng-click="calcResult()">calculate</button>
</p>
{{num1}}{{selectedOperation}} {{num2}} = {{result}}
</div>
else if(this.selectedOperation==='\') must be else if(this.selectedOperation==='/'). You are escaping the second quotation mark.
At first the input tag is a standalone tag and has no value inside. Try to use data-ng-model instead or set the value to a span.
<input type="text" data-ng-model="c1.result" />
or
<span>{{c1.result}}</span>
Then have a look at the browser console if there are any errors reported.
Related
View 1:
<div ng-controller="ctrl1">
<button ng-click="goToExtendedForm({'name':'aaa'})">
</button>
</div>
ctrl1:
$scope.selectedList = {
name: ""
};
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
$state.go('view2');
console.log(e); // prints updated value
};
View 2:
<div ng-controller="ctrl1">
<input
id="name"
name="name"
type="text"
ng-model="selectedList.name"
ng-readonly="true"
/>
</div>
But the input box is always empty, even though to get to the view the goToForm() is called. Why doesn't it update the HTML value?
Views are changed with ui.router's $state.
From your description, your code is supposed to work. Check if you are passing the right parameter into the function. Here is a working demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selectedList = {
name: ""
};
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
console.log(e); // prints updated value
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="goToForm({'name':'aaa'})">Change</button>
<br>
<input type="text" ng-model="selectedList.name" ng-readonly="true" />
</div>
Try adding $scope.$apply() at the end of your $scope.goToForm function
Try this ;
HTML Code
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<input
id="name"
name="name"
type="text"
ng-model="selectedList.name"
ng-readonly="true"
/>
<button ng-click="goToForm(testUserDetails)" >Go To</button>
</button>
</div>
</div>
Define controller like this;
function ClickToEditCtrl($scope) {
$scope.selectedList = {
name: ""
};
$scope.testUserDetails ={
name: "nimal"
}
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
console.log(e); // prints updated value
};
}
Initially the value of button is disable because value of button is true so the button is disabled.After selecting the checkbox now the button should be able to click. But it is not able to click :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a = function(x) {
console.log(x);
a = [1, 2, 3];
console.log(a);
}
});
</script>
</body>
</html>
Your ng-disabled always checks for length. But you actually need to check the boolean value of your checkbox to satisfy the scenario you are trying to achieve.
I have updated your code to the code below
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='formData.week[0]==false &&
formData.week[1]==false &&
formData.week[2]==false &&
formData.week[3]==false &&
formData.week[4]==false
' ng-click=a(formData)>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formData = {}
$scope.formData.week = []
$scope.formData.week[0]=false;
$scope.formData.week[1]=false;
$scope.formData.week[2]=false;
$scope.formData.week[3]=false;
$scope.formData.week[4]=false;
});
</script>
</body>
</html>
change ng-disabled='!formData.week.length'
to
ng-disabled='!(!!formData.week[0] || !!formData.week[1] || !!formData.week[2] || !!formData.week[3] || !!formData.week[4])'
check out the working example : https://plnkr.co/edit/JOARO1NwgunCw5Zcyvpo?p=preview
Actually there is something to understand
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
</div>
So when you are applied NgModel as formData.week[0] so it will form the scope variable formData something like that
{
"week" :{"0":true,"1" : true", "2" : "false"
}
as you have not declared formData.week as an array. So for this object to be checked on length you need to make a function like
<input type="submit" ng-disabled='!checkLength()' ng-click=a(formData)>
the function will look like
$scope.checkLength = function(){
if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0)
return true;
else
return false;
}
Moreover if you want the button enabled only when any of the checkboxes is true. then you may modify the function
$scope.checkLength = function(){
if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0) {
var point = 0;
for(var i=0;i< Object.keys($scope.formData.week).length;i++){
if($scope.formData.week[i] == true){
point++;
break;
}
}
if(point>0) return true;
else return false;
}
else
return false;
}
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 module with a component that is a simple calculator.
How can I call from the copmnent template the controller methods?
How can I pass from the controller methods the result back to the component template?
HTML:
<html ng-app="controllersWithMethods">
<head>
<script src="app.module.js"></script>
<script src="methods/methods.module.js"></script>
<script src="methods/methods.component.js"></script>
</head>
<body>
<methods></methods>
</body></html>
App.module.js:
angular.module( 'methods', []);
methods.template.js:
<input type="number" ng-model="value1" />
<input type="number" ng-model="value2" />
<button ng-click="add()"> + </button>
<button ng-click="multiply()"> x </button>
<hr>
<p>
Value 1 = {{value1}}</br>
Value 2 = {{value2}}</br>
The result is: {{result}}
</p>
methods.component.js:
angular.
module('methods').
component('methods', {
templateUrl: 'methods/methods.template.html',
controller: function() {
this.value1 = 0;
this.value2 = 0;
this.result = 0;
this.add = function () {
this.result = this.value1 + this.value2;
}
this.multiply = function () {
this.result = this.value1 * this.value2;
}
}
});
What I see is that the methods are not called. The value1 and value2 are visible, the result not.
Of course, I can call from the app's outer component the controller and work with $scope. I read that working with components is a more decent way of setting up the software.
Solved.
Without bindings. The bindings are not necessary because the variables are within the same component. See the code below, the other 2 files were not changed.
HTML:
<input type="number" ng-model="$ctrl.value1" />
<input type="number" ng-model="$ctrl.value2" />
<button type="button" ng-click="$ctrl.add()"> + </button>
<button type="button" ng-click="$ctrl.multiply()"> x </button>
<hr>
<p>
Het resultaat is: {{$ctrl.result2}}
</p>
Angular:
angular.
module('methods').
component('methods', {
templateUrl: 'methods/methods.template.html',
controller: function() {
function add() {
this.result2 = this.value1 + this.value2;
}
function multiply() {
this.result2 = this.value1 * this.value2;
}
this.add = add;
this.multiply = multiply;
}
});
I got two elements paragraph and input tag. When i click the paragraph, the input should show and paragraph should hide. when the input is blurred the input should hide and paragraph should show.
I tried this but not working
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" ng-blur="edit = false">
<input type=text name="email" ng-blur="blurUpdate()" />
</div>
Move ng-blur to input please see demo below
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope, $timeout) {
$scope.showEditor = function() {
$scope.edit = true;
var textbox = document.getElementById("input_email");
var tmp = $scope.text
$scope.text = ""
$timeout(function() {
textbox.focus();
$scope.text = tmp;
});
}
$scope.blurUpdate = function() {
// add this line
$scope.edit = false;
//your code
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl" ng-init="text='some text'">
<p ng-click="showEditor()" ng-show="!edit">{{text}}</p>
<div ng-show="edit">
<input type=text name="email" ng-blur="blurUpdate()" ng-model="text" id="input_email" />
</div>
</div>
</div>
the ngBlur is compatible with input tag, that is why it is not working:
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" >
<input type=text ng-blur="edit = false" name="email" />
</div>
http://jsfiddle.net/xgp2qsww/1/