Is there a way to initialize the following form fields so the Angular code doesn't display "NaN" when the form is loaded? Having the value start at zero would be nice.
<input type="text" id="field1" value="0"/>
<input type="text" id="field2" value="0"/>
<br />
Total {{field1*50--field2}}
http://plnkr.co/edit/Cn0tCJlclIMXivli1is0?p=preview
You can use the ng-init directive. Here's the stuff copied from your plunker that works with it. But you should use this with caution, here's an excerpt from the documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
testing
<input type="text" id="field1" ng-model="field1" ng-init="field1 = 0"/>
<input type="text" id="field2" ng-model="field2" ng-init="field2 = 0"/>
<br />
Total {{field1*50--field2}}
</body>
</html>
So really, you should do this:
angular.module('app', [])
.controller('testCtrl', ['$scope',
function($scope) {
function init() {
$scope.field1 = 0;
$scope.field2 = 0;
}
init();
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
testing
<input type="text" id="field1" ng-model="field1" />
<input type="text" id="field2" ng-model="field2" />
<br />Total {{ field1 * 50 - -field2}}
</div>
</body>
</html>
You just add a controller to your HTML and assign a ng-model to your <input> fields and intialize it with some values in the controller instead of using value in <input>.
That's enough to have a default value for the fields
Here is the working plunker of your code,
http://embed.plnkr.co/Ssk1bP6LWq9YgAIDYaEk/preview
Hope this helps!!!!
Related
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
i have this peace of code in angularjs:
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-value="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
The Problem when i try to add ng-model in the input text, the value of ng-value disappeared, how i can fix this proble please ?
From the ngValue reference:
It can also be used to achieve one-way binding of a given expression
to an input element such as an input[text] or a textarea, when that
element does not use ngModel.
https://docs.angularjs.org/api/ng/directive/ngValue
This means you have to use either ngModel or ngValue, but not both. They conflict.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.benchmarGeographyObj = [{'BEN_BENCHMARK_GEOGRAPHY': 1},{'BEN_BENCHMARK_GEOGRAPHY': 2}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
</body>
</html>
Today is the first when i started reading about Angular JS and I tried to do a very basic thing after reading from a tutorial.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" data-ng-app="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
I downloaded and added the angular js library from GitHUB 1.4.x(latest). I expect the name to be written on the fly when user types in the textbox but nothing happens. What am i missing for this basic set up ?
P.S. - I am using an HTML page in Visual Studio 2010.
Some minor adjustments to your code, and it works just fine:
<html ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" ng-model="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
A working code pen can be seen here: http://codepen.io/anon/pen/jPWyaR
JSFIDDLE http://jsfiddle.net/seadonk/aze39fjq/
change the html tag to: <html ng-app>
change your input directive to data-ng-model="name"
<html ng-app>
<head>
</head>
<body>
Name:
<br />
<input type="text" data-ng-model="name" /> {{ name }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
I note a few things.
a) No reference to script file which should contain an angular module declaration.
b) The input references an angular app named "name" but it is immediately closed
c) No controller declared
d) data-ng-app needs older version of angular. I suggest use 1.3.5
I will do the following corrections to get it working.
http://plnkr.co/edit/rfXgNl6ugqSmlwXOaHIN?p=preview
<!DOCTYPE html>
<html >
<head>
<title>
My First Angular App
</title>
<script src="https://code.angularjs.org/1.3.15/angular.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('name', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</head>
<body ng-app="name">
Name:
<br />
<div ng-controller="MainCtrl">
<input type="text" ng-model="name"/>
{{name}}
</div>
</body>
</html>
this is my base app with angulajs 1.3.11 & ui.bootstrap. My Datepicker won't work. The date calendar don't show. Why? Thank's a lot.
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap#*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.11" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js#*" data-semver="0.12.0" src="https://raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>DATE TEST</h1>
<div class="col-md-2">
<input type="text" class="form-control" data-ng-model="mydata" id="mydata" name="mydata" datepicker-popup="dd-MM-yyyy" />
</div>
</body>
</html>
And my Js:
var myApp = angular.module('app', ['ui.bootstrap']);
This is my base code on http://plnkr.co/edit/dmM3NiWPF30wXM4PiiPc?p=preview
We'll need to do below changes.
Bootstrap requires jQuery
Add is-open attribute to datepicker and toggle the flag when required.
Markup
<input type="text" class="form-control" data-ng-model="mydata" id="mydata"
name="mydata" datepicker-popup="dd-MM-yyyy" is-open="opened" ng-click="opened = !opened"/>
Here is the Updated plnkr
Bootstrap do not require JQuery.
OP was missing the controller and is-open variable. Working example.
In HTML:
is-open="opened"
and in JS:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
This is a really simple example:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js" data-require="angular.js#1.2.x"></script>
</head>
<body>
<form name="myForm">
<div>
<input type="number" name="number" ng-model="num" ng-pattern="/^\d+$/"/>
<br>error: {{ myForm.number.$error }}
</div>
<div>
<input type="text" name="text" ng-model="text" ng-pattern="/^\d+$/"/>
<br>error: {{ myForm.text.$error }}
</div>
</form>
<script type="text/javascript" charset="utf-8">
angular.module('myApp', []);
</script>
</body>
</html>
Here is the plunker
With both using the same ng-pattern, only the one with input type text work. Am I missing something here?
The HTML5's number type is not currently supported by AngularJS. If you put required directive in the input control, the validation will be triggered, and you can get the status from myForm.number.$valid. Hope it helps.