I have a simple form in angularjs, that inputs value a and value b. when I click the button, I want the values to be alerted out. How do I do that?
<div ng-controller="myController">
<p><label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" /></p>
<p><label>value b : </label><input name="valueb" id="valueb" ng-model="valueb"/></p>
<button type="button" ng-click = "add()" >Sign In</button>
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
function myController($scope) {
$scope.add = function(){
alert("valuea:"+$scope.valuea);
alert("valueb:"+$scope.valueb);
}
};
}]);
There are certain issues with your code. In your html there is no module myApp. Also within your controller callback, there is no need to add the separate function with the controller name function myController() {}.
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.add = function(){
alert("valuea: "+$scope.valuea);
alert("valueb: "+$scope.valueb);
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<p><label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" /></p>
<p><label>value b : </label><input name="valueb" id="valueb" ng-model="valueb"/></p>
<button type="button" ng-click = "add()" >Sign In</button>
</div>
</div>
See working fiddle - https://jsfiddle.net/otqzk6ua/
Here is the answer :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<p>
<label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" />
</p>
<p>
<label>value b : </label><input name="valueb" id="valueb" ng-model="valueb" />
</p>
<button type="button" ng-click="add()">Sign In</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.add = function() {
alert("valuea:" + $scope.valuea);
alert("valueb:" + $scope.valueb);
}
});
</script>
</body>
</html>
Related
I have this weird issue where only one of my models are actually working. The only model that's updating is "toDo" as it repeats underneath the form, but "clicked" nor
"addToDo" are updating or being clicked:
using mvc
<head>
<title>ToDo</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/Controllers/ToDoController.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controll="myCtrl">
<form>
<div class="form-group">
<label for="toDoItem">To Do</label>
<input type="text" class="form-control" id="toDoItem" placeholder="Enter your To-Do" ng-model="toDo"/>
<button type="button" class="btn btn-default" ng-click="addToDo()">Add To Do</button>
</div>
</form>
<p>ToDo: {{toDo}}</p>
<p>Clicked: {{clicked}} </p>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.toDo = "";
$scope.clicked = false;
$scope.toDoArray = {};
$scope.addToDo = function() {
scope.toDoArray.push($scope.toDo);
$scope.clicked = true;
alert("To Do Added");
}
});
https://jsfiddle.net/npq5kc3h/
fiddle
You have some issues
You have a typo in your HTML:
<div ng-app="myApp" ng-controll="myCtrl">
^
You're not using the right $scope variable
scope.toDoArray.push($scope.toDo);
^
Your model toDoArray must be initialized as an array
$scope.toDoArray = {};
^
Snippet
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.toDo = "";
$scope.clicked = false;
$scope.toDoArray = [];
$scope.addToDo = function() {
$scope.toDoArray.push($scope.toDo);
$scope.clicked = true;
alert("To Do Added");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container">
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label for="toDoItem">To Do</label>
<input type="text" class="form-control" id="toDoItem" placeholder="Enter your To-Do" ng-model="toDo" />
<button type="button" class="btn btn-default" ng-click="addToDo()">Add To Do</button>
</div>
</form>
<p>ToDo: {{toDo}}</p>
<p>Clicked: {{clicked}} </p>
</div>
I want to display checkboxes inside ng repeat. The checkboxes are not displayed. The checkboxes are not displayed at all. I am not understanding what the misatke is. Here is the code -
<div class = "col s4">
<form ng-submit="$ctrl.todoAdd()">
<input type="text" ng-model="$ctrl.todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in $ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
<p><button ng-click="$ctrl.remove()">Remove marked</button></p>
</div>
And the javascript code-
angular.
module('dashboard').
component('dashboard', {
templateUrl: 'dashboard/dashboard.html',
controller: ['$routeParams','$http',
function dashboardController($routeParams,$http) {
this.todoList = [{todoText:'Clean House', done:false}];
this.todoAdd = function() {
this.todoList.push({todoText:this.todoInput, done:false});
this.todoInput = "";
};
this.remove = function() {
var oldList = this.todoList;
this.todoList = [];
angular.forEach(oldList, function(x) {
if (!x.done) this.todoList.push(x);
});
};
//Rest of the controller code
}
]
});
You need to have empty dependencies passed to your module while declaring,
change it as,
angular.
module('dashboard',[]).
DEMO
var app = angular.module('myFirstApp', []);
app.controller('myCtrl', function () {
this.todoList = [{
"todoText": "run today",
"done": false
},
{
"todoText": "read today",
"done": false
}];
});
<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myCtrl as ctrl">
<div ng-repeat="x in ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
</div>
</body>
</html>
I am new to Angular JS, I created a div with input elements and I didn't use ng-model for input boxes.
<div class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat=" x in $ctrl.outputProductAttributeValueList">
{{x}} <input type="text" />
</p>
<br>
<button type="submit" ng-click="$ctrl.onRankingFormSubmit()"> SUBMIT</button>
</div>
</div>
When I click on submit button I have to access all input values .Please help me how to do that .. I tried as below.
angular.module("productList")
.component("productList",{
templateUrl : "product-list/product-list.template.html",
controller : ["$http" ,"$scope","$document",function productListController($http,$scope,$document){
var self = this;
self.outputProductAttributeValueList =[ "age", "gender","all"];
self.onRankingFormSubmit = function () {
var queryResult = $document[0].getElementById("rankingForm")
console.log(queryResult);
// HERE queryResult is printing how to proceed further
};
}]
});
Now I want to collect all those input values dynamically created by ng-repeat. Please tell me how to do that ?
AngularJS ngModel is the standard approach for binding the view into the model instead of interacting directly with the DOM.
You can get all the inputs within the div id="rankingForm" you can do:
var inputs = $document[0]
.getElementById('rankingForm')
.getElementsByTagName('input');
Or by using Document.querySelectorAll():
var inputs = $document[0].querySelectorAll('#rankingForm input');
Once you have the inputs than iterate over all of them to get the values.. Notice that I have added attribute name to the inputs:
Code whitout ngModel:
angular
.module('App', [])
.controller('AppController', ['$scope', '$document', function ($scope, $document) {
$scope.outputProductAttributeValueList = ['age', 'gender', 'all'];
$scope.onRankingFormSubmit = function () {
var inputs = $document[0].querySelectorAll('#rankingForm input');
inputs.forEach(function(input) {
console.log(input.name + ': ' + input.value);
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController" class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat="x in outputProductAttributeValueList">
{{x}} <input type="text" name="{{x}}" />
</p>
<br>
<button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
</div>
</div>
Code with ngModel:
angular
.module('App', [])
.controller('AppController', ['$scope', '$document', function ($scope, $document) {
$scope.outputProductAttributeValueList = ['age', 'gender', 'all'];
// Model inputs
$scope.inputs = {};
$scope.onRankingFormSubmit = function () {
$scope.outputProductAttributeValueList.forEach(function(input) {
// Access to model inputs: $scope.inputs[input]
console.log(input + ': ' + $scope.inputs[input]);
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController" class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat="x in outputProductAttributeValueList">
{{x}} <input type="text" ng-model="inputs[x]" />
</p>
<br>
<button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
</div>
</div>
$setPristine works alright when referenced with $scope but doesn't seem to work with 'controller as syntax'
In View:
<h2>With Controller as syntax</h2>
<div ng-controller="FirstCtrl as first">
<form name="form1" id="form" novalidate>
<input name="name" ng-model="first.data.name" placeholder="Name" required/>
<button class="button" ng-click="first.reset()">Reset</button>
</form>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
<hr>
<h2>With $scope</h2>
<div ng-controller="SecondCtrl">
<form name="form1" id="form" novalidate>
<input name="name" ng-model="data.name" placeholder="Name" required/>
<button class="button" ng-click="reset()">Reset</button>
</form>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
In app.js:
var app = angular.module('plunker', []);
app.controller('FirstCtrl', function() {
'use strict';
var vm = this;
vm.data = { "name": ""};
vm.reset = function() {
vm.data.name = "";
vm.form1.$setPristine();
}
});
app.controller('SecondCtrl', function($scope) {
'use strict';
$scope.data = { "name": ""};
$scope.reset = function() {
$scope.data.name = "";
$scope.form1.$setPristine();
}
});
Here is the plunker: http://plnkr.co/edit/VcgZx3?p=preview
Even if you use controller as syntax, the form and other attributes are still bound to the scope not to the controller instance so you still have to use $scope.form1.$setPristine(); to set the form's state.
var app = angular.module('my-app', [], function() {})
app.controller('FirstCtrl', function($scope) {
'use strict';
var vm = this;
vm.data = {
"name": ""
};
vm.reset = function() {
vm.data.name = "";
$scope.form1.$setPristine();
}
});
app.controller('SecondCtrl', function($scope) {
'use strict';
$scope.data = {
"name": ""
};
$scope.reset = function() {
$scope.data.name = "";
$scope.form1.$setPristine();
}
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<div ng-app="my-app">
<h2>With Controller as syntax</h2>
<div ng-controller="FirstCtrl as first">
<form name="form1" id="form" novalidate>
<input name="name" ng-model="first.data.name" placeholder="Name" required/>
<button class="button" ng-click="first.reset()">Reset</button>
</form>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
<hr/>
<h2>With $scope</h2>
<div ng-controller="SecondCtrl">
<form name="form1" id="form" novalidate>
<input name="name" ng-model="data.name" placeholder="Name" required/>
<button class="button" ng-click="reset()">Reset</button>
</form>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
</div>
An alternative to using Arun's suggestion of accessing the form through $scope is simply to ensure the form is accessible through the controller.
To do this all you have to do is change your HTML for the 'controller as' version very slightly. Change the form's name to include the controller object, also change any references to the form from the template to include the controller variable:
<h2>With Controller as syntax</h2>
<div ng-controller="FirstCtrl as first">
<form name="first.form1" id="form" novalidate>
<input name="name" ng-model="first.data.name" placeholder="Name" required/>
<button class="button" ng-click="first.reset()">Reset</button>
</form>
<p>Pristine: {{first.form1.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
<hr>
Your Javascript will now run unchanged.
I think an even easier way to accomplish this is to provide the form controller as a parameter to the reset() function:
…
<button class="button" ng-click="reset(form1)">Reset</button>
…
and change the reset() function slightly, so that it uses the supplied parameter:
$scope.reset = function(form) {
$scope.data.name = "";
form.$setPristine();
}
You can use $setPristine without $scope:
<form ng-submit="$ctrl.save()" name="$ctrl.myForm">
And in your controller:
var $ctrl = this;
...
$ctrl.myForm.$setPristine();
$ctrl.myForm.$setUntouched();
It works for me. (AngularJS v1.5.7)
How do you use multiple controllers for AngularJS 1.3.8?
I've tried the following below but only the first controller outputs correctly and the second controller outputs with {{ name }} and {{ age }}.
HTML:
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div ng-app="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function(){ // Logs the amount of times name changes
console.log($scope.name);
});
}]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope', function($scope) {
$scope.name = "John";
$scope.age = "22";
}]);
</script>
You cannot have more than 1 ng-app directive in the same document. You would need to manually bootstrap the other. Other wise only the first instance of ng-app will be bootstrapped automatically by angular.
Other issue is that there is no provider called $scope2, you need to inject $scope.
Example:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div id="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
</script>
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div id="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
</script>
If your intention is to use just one module and bind other controllers to it. Then just have one ng-app and register your controller to app1.
Create a module:
angular.module('app', []);
Register a controller:
angular.module('app').controller('Ctrl1', ctor);
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]).controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);;
</script>
Why not just define 2 controllers for 1 app?
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<p>Person</p>
<div ng-controller="myCtrl">
First name <input type="text" ng-model="firstName"><br>
Last name <input type="text" ng-model="lastName"><br>
Birthday <input type="date" ng-model="birthday"><br>
{{firstName+' '+lastName}} was born on {{birthday}}
</div>
<div ng-controller="myCtrl2" ng-init="">
<p>The third result is {{ points[2] }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
$scope.birthday= new Date();
});
app.controller('myCtrl2', function($scope) {
$scope.points=[1,15,19,2,40];
});
</script>
</body>
</html>