ng-model value not updating in controller: Angular js - javascript

I used this technique in another place and it worked but in this case it is not working. Here lane_title shows undefined. Am I missing something here.
<input type="text" ng-model="lane_title" placeholder="Title of the lane" >
<button ng-click="testScope()">Create</button>
In controller:
$scope.testScope = function(){
alert($scope.lane_title);
}

Seems to be working fine. But make sure to initialize the model variable. Otherwise, it will print as undefined
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.lane_title = "";
$scope.testScope = function(){
alert($scope.lane_title);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="lane_title" placeholder="Title of the lane" >
<button ng-click="testScope()">Create</button>
</div>

Related

$scope.form.$setSubmitted is not a function

I have a form with angular, but when I try to call $scope.myForm.$setSubmitted() it crashes. What am I doing wrong?
I get this error:
$scope.myForm.$setSubmitted is not a function
It should be possible, based on the docs.
$setSubmitted();
Sets the form to its submitted state.
I also seem to have some problem with $touched in the line:
ng-if="myForm.myValue.$error.min && (myForm.myValue.$touched || myForm.$submitted)"
So, two questions,
Why can't I call $setSubmitted()?
Why can I not get the $touched flag from the input?
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
var vm = this;
vm.submitTheForm = function(){
$scope.myForm.$setSubmitted();
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController as ctrl">
<form name="myForm" ng-submit="ctrl.submitTheForm()" >
<input type="submit" value="submit" text="foo">
<input type="number" class="" name="myValue" max="10" ng-model="foo" max="10" min="0" number="{}" placeholder="enter a number" />
<div ng-if="myForm.myValue.$error.min && (myForm.myValue.$touched || myForm.$submitted)">Must be a positive number. This should be seen if input is touched or the form is submitted.</div>
<div ng-if="myForm.myValue.$error.max && (myForm.myValue.$touched || myForm.$submitted)">Cannot be larger than 10. This should be seen if input is touched or the form is submitted.</div>
<br/>
<br/>
<tt>myForm.myValue.$valid = {{myForm.myValue.$valid}}</tt><br/>
<tt>myForm.myValue.$touched = {{myForm.myValue.$touched}}</tt><br/>
<tt>myForm.myValue.$error.min = {{myForm.myValue.$error.min}}</tt><br/>
<tt>myForm.myValue.$error = {{myForm.myValue.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$submitted = {{myForm.$submitted}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</div>
</div>
You are using AngularJS v1.2.23 which does not support $setSubmitted() AngularJS v1.2.3, it's only supported after v1.3.0
$scope.myForm.$setSubmitted is not a function!
This solution may not be very specific to this question but generally we get this error when we try to assign setSubmitted to an object instead of a function.
$scope.myForm.$setSubmitted = function(){} will solve the problem.

Pass ng-model value into ng-click failed

How to pass ng-model's value to ng-click?
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
Why in my submit function it doesn't get the username's value?
http://jsfiddle.net/U3pVM/26604/
You don't need to pass username as a parameter to your function. You can get the username value from $scope.username in your function already.
Here is the correct answer:
Corrected the 'username' in alert and also while defining the method should not use paranthesis $scope.submit = function() { }
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(username) //get username here
}
});
Also you have specify the module name in the html:
<div ng-app='myApp'>
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
There are some missings and spelling errors.
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(username) //get username here
console.log("username", username)
}
});
<div ng-app ="myApp">
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
Here is the updated Demo
There are some errors in your code
Below, find the fixed code
HTML
<div ng-app="myApp">
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
CONTROLLER
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(userame) //get username here
}
});
there are errors in your fiddle
please update your submit method as below
$scope.submit = function(username){
alert(username) //get username here
}
You are using parenthesis () after $scope.submit which is invalid declaration for function.
also give name to ng-app like
<div ng-app="myApp">
and inside alert give variable name properly , you have done spelling mistake in variable name.
There is a missing decleration of your ng-app attribute. Try this:
<div ng-app='myApp'>
In addition, correct your function name and argument typo:
$scope.submit = function(username){
alert(username)
}
This is an example of your requirement. Just test on my snippet sending value on alert().
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.submit = function(mymdl){
alert(mymdl);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="mymdl"/>
<button ng-click="submit(mymdl)">Submit</button>
</div>

ng-model value of input text box is undefined inside angularjs controller when set dynamically through javascript

In my HTML Page i am setting an input text box value not by typing but through JavaScript and then when I am fetching that value using AngularJS inside the controller using scope, then it's showing undefined....
Below is my code:-->
<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form id="someForm" name="someForm">
First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
Last Name: <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change'}" />
<input id="getUser" type="submit" ng-click="getUserName(user)" value="Get User" />
<button ng-click="resetForm(user)">RESET</button>
</form>
</div>
<script>
$('#getUser').on('click', function(){
//$("getUser").on('click', function(){
//alert("First Name "+$("#fname").val());
$("#lname").val($("#fname").val());
alert("Last Name set to "+$("#lname").val());
// });
});
</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.getUserName = function(user)
{
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
$scope.resetForm = function(user) {
//Even when you use form = {} it does not work
angular.copy({},user);
}
});
</script>
</body>
</html>
After clicking Get User Button, first the lastname field value is set through JQuery then AngularJS controller is called in which the ng-model value is undefined. I am unable to understand this. What is the solution or workaround for this type of scenario where the input text field value is set dynamically through JavaScript or JQuery and fetched and used using AngularJS Model and Controller.
Looks like you have a typo at ng-model="user.lasttname"
<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form id="someForm" name="someForm">
First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
Last Name: <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change blur'}" />
<input id="getUser" type="button" ng-click="getUserName(user)" value="Get User" />
<input id="getUser2" type="button" ng-click="getUserName(user)" value="Get User" />
<button ng-click="resetForm(user)">RESET</button>
</form>
</div>
<script>
$('#getUser').on('click', function(){
var element = angular.element($('#someForm'));
element.scope().user.lastname = $("#fname").val();
});
</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {};
$scope.getUserName = function()
{
console.log("User: "+ JSON.stringify($scope.user));
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
$scope.resetForm = function(user) {
//Even when you use form = {} it does not work
// angular.copy({},user);
}
});
</script>
</body>
</html>
Add this in angularjs code:-
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {}; // Initiate this
$scope.getUserName = function(user)
{
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
});
Of course!!! If you want the binding (HTML <--> JavaScript) you must respect the rules of Angular. What you need to do is to update the ng-model being defined for the input box. So, add to your input box: ng-model="blabla" and within your JavaScript: $scope.blabla = <value>.
Correction: You do have the ng-model in the input, but still miss the assignment within your javascript code.

AnjularJS get value of textboxes after button press

I set the values of textboxes via a ajax request in my controller like this :
$http({method: 'GET', url: url}).success(function(data) {
$scope.valzz = data;
$scope.company = $scope.valzz[0].Company;
});
Then in my html :
<label class="item item-input item-stacked-label">
<span class="input-label">Company :</span>
<input type="text" placeholder="Company" value="" ng-model="company">
</label>
<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
Save Changes
</button>
This correctly puts the company name in the company textbox. But when make a change to that textbox and press the save button, the new value of the textbox isnt showing - it still gets the original. This is the button click in the controller :
$scope.saveChanges=function(){
alert($scope.company);
};
Why is $scope.company not the new value of the textbox? am i doing something wrong? (sorry if basic i am new to angular)
Try removing value=""
HTML:
<label class="item item-input item-stacked-label">
<span class="input-label">Company :</span>
<input type="text" placeholder="Company" ng-model="company">
</label>
<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
Save Changes
</button>
In corresponding CONTROLLER:
$scope.saveChanges = function() {
alert($scope.company);
};
You don't have a watcher for that model.
$scope.$watch('company', function(company) {
console.log(company);
}
Or in your template, you can interpolate the value:
{{company}}
And then you can see it changing on the html page, because angular make a watcher for it behind the scene
Needed to put this.company not $scope
Please define $scope.company before $http call
app.controller('myCtrl', function($scope, $http){
$scope.company = null; // <--
$http({method: 'GET', url: url}).success(function(data) {
$scope.valzz = data;
$scope.company = $scope.valzz[0].Company;
});
}
Because, once the partials has rendered, it gets only the defined properties in $scope. After that if any property is added inside $scope it needs to call the $apply.
Hope this may help you.
I would assume that you have $scope working properly, and that you have initialized the controller in your app, as well as linked to the proper controller file. Please compare your code to what I have here, as this is working properly.
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src ="controller.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="testController">
<form>
<label class="item item-input item-stacked-label">
<span class="input-label">Company :</span>
<input type="text" placeholder="Company" ng-model="company">
</label>
<button class="button button-positive" style="margin-top:10px;" ng-click="saveChanges()">
Save Changes
</button>
</form>
</div>
</body>
</html>
Controller:
(function(){
'use strict';
var app = angular.module('myApp', []);
app.controller('testController', [ '$scope', function ($scope){
$scope.saveChanges=function(){
alert($scope.company);
};
}]);
})();
Edit: Fiddle

How get Hidden value in angularjs?

i want to alert hidden value in this sample angularjs example. but not alert hidden value. why?
function TestController($scope) {
$scope.id = "";
$scope.test = function () {
alert($scope.id)
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-value="12"></input>
<input type="submit" ng-click="test()" value="alertHiddenValue"></input>
</div>
ng-value isn't what you're looking for here. In Angular, you use ng-model to bind a controller value to your view element's value, like this:
function TestController($scope) {
$scope.id = "12"; // Initial value can be set here
$scope.test = function () {
alert($scope.id);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<!-- ngModel is used to two-way bind between your value & your controller -->
<input type="hidden" name="id" ng-model="id"></input>
<input type="submit" ng-click="test()" value="alertHiddenValue"></input>
</div>
You need to bind value to id using ng-model and also instead of using ng-value use ng-init to initialize it. Also as mentioned by #RGraham, if you want to have default value try to initialize it in controller.
ng-value is used for binding value to or input [radio/checkbox], see here.
function TestController($scope) {
$scope.id = "";
$scope.test = function () {
alert($scope.id)
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-model="id" ng-init="id=12"></input>
<input type="submit" ng-click="test()" value="alertHiddenValue"></input>
</div>

Categories

Resources