I have the following code, but when I press Submit nothing happen
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
</head>
<body>
<form ng-submit="submit()" ng-controller="Ctrl">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
<script>
function Ctrl($scope) {
var str = $scope.text;
var ret = {};
for(x = 0, length = str.length; x < length; x++) {
var l = str.charAt(x);
ret[l] = (isNaN(ret[l]) ? 1 : ret[l] + 1);
}
for(key in ret) {
alert(key + ' :: ' + ret[key]);
}
}
</script>
</body>
</html>
What did I do wrong?
In this line:
<form ng-submit="submit()" ng-controller="Ctrl">
You configure to angular execute the submit() function at the controller, but you don't have this function declared. You just need to create the submit function at the controller:
$scope.submit = function () {
// Put you logic inside the method.
}
I create a plunker with your code working:
Plunker
Related
i need to show total amount. first and second text box value sum should be display in total text box. have any way to do it.
<input type="text" ng-model="add.amount1"/>
<input type="text" ng-model="add.amount2"/>
Total <input type="text" ng-model={{add.amount1+add.amount2}}/>
You need to have a ng-change on text boxes and call a function to calculate the sum.
DEMO
var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.add = {};
$scope.add.amount1 = 0;
$scope.add.amount2 = 0;
$scope.calculateSum = function(){
$scope.sum = parseInt($scope.add.amount1) + parseInt($scope.add.amount2);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<input type="text" ng-change="calculateSum()" ng-model="add.amount1"/>
<input type="text" ng-change="calculateSum()" ng-model="add.amount2"/>
Total <input type="text" ng-model="sum"/>
</body>
I hope this can also be considered
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.add = {};
$scope.add.amount1 = 1;
$scope.add.amount2 = 2;
$scope.sum = function(add) {
return +add.amount1 + +add.amount2;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app='myApp'>
<div ng-controller='myCtrl'>
<input type="text" ng-model="add.amount1"/>
<input type="text" ng-model="add.amount2"/>
Total <input type="text" value="{{sum(add)}}" />
</div>
</body>
</html>
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.
AngularJS newbie here. I'm trying to make a very simple calculator that adds two values in Angular 1.5. The value of calc.result doesn't update.
index.html
<body ng-app="Calculator">
<div class="container" ng-controller="calcCtrl as calc">
<input type="number" ng-model="calc.input1">
<span>+</span>
<input type="number" ng-model="calc.input2">
<span>=</span>
<input type="number" ng-model="calc.result">
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/calc.js"></script>
</body>
js/app.js
(function() {
angular.module('Calculator', []);
})();
js/controllers/calc.js
(function() {
angular
.module('Calculator')
.controller('calcCtrl', CalculatorControl);
function CalculatorControl()
{
this.input1 = 0;
this.input2 = 0;
this.result = this.input1 + this.input2;
}
})();
Simply change one row:
<span>=</span>
<input type="number" ng-value="calc.input1*1 + calc.input2*1">
You need to define a computed property to access a value that is dependent on other properties on the controller / scope.
To achieve it, javascript gives you the ability to have a getter on object, that you could use to compute the value, but still can access it as a property, in your case its result.
You could read more about Object.defineProperty on MDN.
Here is what you could do.
(function() {
angular.module('Calculator', []);
})();
(function() {
angular
.module('Calculator')
.controller('calcCtrl', CalculatorControl);
function CalculatorControl() {
this.input1 = 0;
this.input2 = 0;
Object.defineProperty(this, 'result', {
get: function() {
return this.input1 + this.input2;
}
});
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="Calculator">
<div class="container" ng-controller="calcCtrl as calc">
<input type="number" ng-model="calc.input1">
<span>+</span>
<input type="number" ng-model="calc.input2">
<span>=</span>
<input type="number" ng-model="calc.result" ng-disabled="true" />
</div>
</div>
Make result as a function which will be calculation of input1 & input2. Also it doesn't make sense to edit result part by user, so instead of result as input field make it display only field.
Markup
<div class="container" ng-controller="calcCtrl as calc">
<input type="number" ng-model="calc.input1">
<span>+</span>
<input type="number" ng-model="calc.input2">
<span>=</span>
<span ng-bind="calc.result()"></span>
</div>
Controller
function CalculatorControl() {
var self = this;
self.input1 = 0;
self.input2 = 0;
self.result = function(){
var input1 = !isNaN(self.input1) ? self.input1: 0,
input2 = !isNaN(self.input2) ? self.input2: 0;
return input1 + input2;
}
}
Plunkr
First of all you are not calling the add function on a click event.
Then you are initializing the values of every function call.
You will need to do the addition in a separate method.
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;
}
});
How can i set 'type attribute' for each added dynamic buttons?
In below code, label names were changing perfectly,, and also i could able to set 'type attribute' to first added button, but remaining button types are not changing properly.. can u pls check it out and solve this to me pls ..
Working DEMO
Updated:
var app = angular.module('myapp', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $compile) {
var counter = 0;
$scope.buttonFields = [];
$scope.add_Button = function(index) {
$scope.buttonFields[counter] = {button: 'Submit'};
var buttonhtml = '<div ng-click="selectButton(buttonFields[\'' + counter + '\'])"><button id="button_Type">{{buttonFields[' + counter + '].button}}</button>//click//</div>';
var button = $compile(buttonhtml)($scope);
angular.element(document.getElementById('add')).append(button);
$scope.changeTosubmit = function () {
var el = document.getElementById("button_Type");
el.setAttribute("type", "submit");
compile(el);
};
$scope.changeToreset = function () {
var el = document.getElementById("button_Type");
el.setAttribute("type", "reset");
compile(el);
};
$scope.changeTocancel = function () {
var el = document.getElementById("button_Type");
el.setAttribute("type", "cancel");
compile(el);
};
++counter;
};
$scope.selectButton = function (val) {
$scope.buttonField = val;
$scope.showButton_Types = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="add_Button($index)">Add Buttons</button>
<hr>
<div id="add"></div>
<form ng-show="showButton_Types">
<div>
<label>Button Name(?)</label><br/>
<input ng-model="buttonField.button">
</div>
<div>
<label>change button types(?)</label><br/>
<input ng-click="changeTosubmit()" name="submit" type="radio"> Submit
<input ng-click="changeToreset()" name="submit" type="radio"> Reset
<input ng-click="changeTocancel()" name="submit" type="radio"> Cancel
</div>
</form>
</body>
</html>
You're selecting "all the buttons" via document.getElementById("button_Type"). That's the problem: getElementById returns the first item it can find with the given id.
Try to use document.querySelectorAll() instead (which will always return an array).