Can you explain me why this simple code doesn't work
I want see the change of user object in the controller.
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
</head>
<body>
<div data-ng-controller="MainCtrl">
<h1>User Info</h1>
<form novalidate id="my-frm" name="myFrm">
<label>Last name</label>
<input type="text" ng-model="user.lastName">
<label>First name</label>
<input type="text" ng-model="user.firstName">
<p ng-click="add()">add</p>
</form>
</div>
<script src="http://code.angularjs.org/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl',function($scope,$log){
$scope.user = {};
$scope.add = function(){
$log.info($scope.user);
};
$scope.$watch(
function(){
return $scope.user;
},
function(n,o){
$log.info(n);
$log.info(o);
}
);
});
</script>
</body>
</html>
Try this:
$scope.$watch("user", function(n, o) {
...
}, true);
Hopefully it is usable in Angular 1.0.8.
What this does is to instruct Angular to do a "deep watch" to your object. Also, since the user is in the $scope, you can specify the dependency using just a string. This is optional, you can still use the function instead of "user" as the first argument to $watch.
Related
I'm trying to use AngularJS to validate a form, with the following code:
HTML
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl as ctrl">
<form name="ctrl.mForm" novalidate>
<input type="text" name="Name" required />
<div ng-show="ctrl.mForm.Name.$invalid">Required</div>
<input type="submit" ng-click="send()" />
</form>
</div>
</body>
JS
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
var vm = this;
vm.send = function () {
alert('ok');
}
});
Plunker
I need to show a div when the input is empty (when the user clicks the submit button is enough), however nothing happens.
What is wrong with this code that it is unable to show the <div> when the input is empty?
Your controler code should have the variable for Name:
angular.module('plunker', []).controller('MainCtrl', function($scope) {
var vm = this;
vm.Name = "";
vm.send = function () {
alert('ok');
}
});
and your input control should use that variable in ng-model
<input type="text" name="Name" ng-model="Name" required />
Here i have updated the plunker
You should use ng-model to validate using angular. i have updated that in plunker. and if you want to use default validation of html required field you should submit form using ng-submit direactive on form element
You have to change the name of your form to "mForm". And on the div you want to show, you have to check if the name field is invalid and if the form got submitted.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl as ctrl">
<form name="mForm" novalidate>
<input type="text" ng-model="name" name="name" required />
<div ng-show="mForm.name.$invalid && mForm.$submitted"">Required</div>
<input type="submit" ng-click="send()" />
</form>
</div>
</body>
</html>
See this Plunker
Here is a snippet:
<!document html>
<html ng-app>
<head>
<title>First</title>
<script src="D:\Coding\angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: ""};
};
</script>
</body>
</html>
Open the .html file with Chrome, the '{{user.name}}' shows on the screen. I think the {{}} position should be the same with the textbox content, what's wrong?
You need to use like this :
<ng-app="Your Module Name ">
In controller write
var app=angular.module("your module name (can be anything)",[]).controller("myCtrl", function("your dependencies "){});
Hope it will work
In the ng-app attribute you need to add app name like as ng-app="myApp"
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
If you are using angular version below 1.3 it should work
DEMO
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.2.3/angular.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: "test"};
};
</script>
</body>
</html>
You need to add like this
ng-app="yourappname"
Refer ng-app directive in documentation
I want to save the current state of check box and reload it when open the page next time.
AngularJS:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $window) {
var init = function () {
$scope.check = $window.localStorage.getItem("app3");
};
init();
$scope.Save = function () {
$window.localStorage.setItem("app3", $scope.check);
}
});
HTML:
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular-1.4.9.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input id="check1" type="checkbox" ng-model="check" />
<input type="button" value="Save" ng-click="Save()" />
</div>
</body>
</html>
Dont use jquery with angular.
Attach a ng-model to your input box like so : and you can access the value of the input in your controller using $scope.check
your local storage setting will be like so :
$window.localStorage.setItem('app3',$scope.check);
Thats it! Kindly go through angular tutorials or their documentation to understand how angular works.
My login screen has HTML like this:
<span class="label">
User Name
<i class="fa"
ng-class="{'fa-exclamation-triangle': as.vloginUserName(as.forms.login.loginUserName) != 'OK'}"
title="{{ as.vloginUserName(as.forms.login.loginUserName) }}"></i>
</span>
<input class="w15r"
id="loginUserName"
name="loginUserName"
ng-change="as.clearRegisterData()"
ng-model="as.loginUserName"
ng-minlength="3"
type="text"
value="" />
and I am using this function to check the minimum length:
vloginUserName = function (field) {
if (angular.isDefined(field)) {
if (field.$error.minlength) return "Minimum Length 5";
}
return "OK";
}
Is there a way that I could delay the presentation of the error message that says "Minimum Length 5" ?
Using ngModelOptions you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example35-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="debounceExample">
<div ng-controller="ExampleController">
<form>
Name:
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 5000 }" /><br />
</form>
<pre>username = "{{user.name}}"</pre>
</div>
</body>
</html>
script.js
(function(angular) {
'use strict';
angular.module('debounceExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = {};
}]);
})(window.angular);
may be this plnkr will help uh.. try this... here, the model field will be updated after 5 sec delay and the error check will occur afterwards...
What is the recommended way to submit a form with angularjs. Will all the different form fields be automatically turned into JSON?
<DOCTYPE html>
<html>
<head></head>
<body>
<div ng-app='mymodule' ng-controller="PeopleController as pc">
<form name="myform" ng-submit="pc.submit(person)">
<input ng-model="person.name"/>
<input ng-model="person.age"/>
<input type="submit" />
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script>
(function (){
angular.module('mymodule',[])
.controller('PeopleController',function($scope,$http) {
$scope.person={'name':'john'};
this.submit = function(p){$http.post('/path/to/my.php',p).success(function(e){console.log(e);});};
});
})();
</script>
</body>
</html>