I am 100% new to AngularJS, and I am trying to set a condition for displaying a String. If the text the user enters starts with the letter a, it should display Hello {{name}}, welcome back! (where {{name}} binds to the name entered), otherwise the text should not appear. My code is as follows:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Type Your Name</title>
</head>
<body>
Please type your name:
<br />
<table><input type="text" data-ng-model="name" />
</br>
Hello {{name}}, welcome back!
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js">
</script>
</body>
</html>
You should use a ng-if and check if the first character is the letter a.
<div ng-app>
<input type="text" data-ng-model="name" />
<span ng-if="name.charAt(0) === 'a'">Hello {{name}}, welcome back!</span>
</div>
Fiddle here.
Do not use ng-show because it always renders the DOM element and hides it if conditions are not met, ng-if renders the DOM element if and only if the condition is met.
Related
Using Angular, I am trying to find away to clear the user input inside a div when its visibility is toggled using ng-show. Ideally, when the conditions are met that cause the div to disappear, it should remove all of the user selected data from the div. Any help would be appreciated!
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<div>
<input type="checkbox" ng-model="varA" ng-init="varA=false"> Item 1
</div>
<div ng-model="varB" ng-show="varA==false">
<input type="checkbox"> Item 2
</div>
</body>
</html>
Use ngChange on your checkbox:
<input type="checkbox" ng-change="checkboxChanged()" ng-model="varA" ng-init="varA=false">
Then in your controller implement the checkboxChanged function:
$scope.checkboxChanged = function() {
$scope.varB = '';
};
By the way, ngModel is meant only for input, select, and textarea only. Do not use ngModel with a div.
You can use the ng-reset-on directive I've written. It can resets all fields based on an expression. You need to specify a controller and the field must have a ng-model.
(function(){
angular.module("app", ["ng-reset-on"]);
angular.module("app").controller("AppCtrl", function() {});
})();
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdn.rawgit.com/waldirpereira/angular-reset-on/master/dist/angular-reset-on.js"></script>
<body ng-app="app">
<div ng-controller="AppCtrl">
<div>
<input type="checkbox" ng-model="varA" ng-init="varA=false"> Item 1
</div>
<div ng-show="varA==false">
<input type="checkbox" ng-model="varB" ng-reset-on="varA==true"> Item 2
</div>
</div>
</body>
</html>
I have simple test page
<head>
........
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/angular/angular.js"></script>
</head>
<body>
.......
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Enter name">
<h1>Welcome {{name}}!</h1>
</body>
When page loads first time I see {{name}} on page
After a half of a second it disappears
that makes quite annoying effect of blinking. What am I missing and how can I avoid it?
You can use ngCloak to prevent this behavior.
I am new to Angular JS. Here is my html :
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src = "angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="index">
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
<script src = "app.js"></script>
<script src = "credentials.js"></script>
</body>
</html>
Then I want to initialize some data for username and password :
(function(){
var app=angular.module("myApp",[]);
app.controller("index", ["$scope", function($scope){
$scope.message="Hello, it's me!";
$scope.user={
username: "admin",
password: "admin"
};
}]);
})();
The username and password doesn't get displayed. Why?
You're problem is that you have bound the controller to the div-tag surrounding the {{message}} expression and not the whole block containing the form. If bind your controller to a surrounding element youre code will work as expected.
Here's one way to do this:
<body ng-app="myApp">
<div ng-controller="index">
<div>
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
</body>
Your controller div is not covering the area where you have user object. controller div must include the code in which you are accessing user object
You can change the code like this
<body ng-app="myApp">
<div ng-controller="index">
{{message}}
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
<script src = "app.js"></script>
<script src = "credentials.js"></script>
</body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
as you can see in this example
ng-model directive binds the value of HTML controls (input, select,
textarea) to application data. ng-bind directive binds application
data to the HTML view.
i can see ng-model in your code but there is not ng-bind which actually binds data to your view. probably that is the reason why your code is not displaying username and password.
With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.
You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
ng-model for input elements like input, textarea and ng-bind for h1,label etc.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-controller="index" ng-app="myApp">
<form>
First Name:
<br>
<input type="text" ng-model="user.username">
<br> Last Name:
<br>
<input type="password" ng-model="user.password">
</form>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("index", ["$scope", function($scope) {
$scope.user = {
username: "admin",
password: "admin"
};
}]);
</script>
</body>
</html>
As,Venu prasad H S and domyos already suggested , a reply to the comment of M. Ko as i don't have enough reputation to comment,
You have defined the ng-model out of the scope of the controller,
<div ng-controller="index">
{{message}}
</div>
What this does is that your controller can access only the stuff inside this div only, as many others suggested you can put an entire div in the body you can do
<body ng-app="myApp">
<div ng-controller="index">
<div>
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
As very aptly provided by domyos , now what this does is that your controller can get to your form and you can display the values you desire.
Alternatively you can also but your controller in the body tag with your ng-app
<body ng-app="myApp" ng-controller="index">
but it is recommended that you put it inside a div, you want to do this so that you can have multiple controllers in one module i.e. on ng-app.
Also, try to name controller as "indexCtrl" as in IndexController it is just a naming convention but that makes your code more readable.
Hope you find this information useful.
Use ng-app and ng-controller directives in your HTML page.
Here is link of Plunker for the same.
Plunker
And donot forget to give reference
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
I have a simple form.
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And i have angular controller
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Why do I get error '$scope.myForm is undefined'?
You have model, module and controller a little confused. My solutions uses Angular 1.2, although you will soon need to move to Angular 2.
Here is my reworking of your example:
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl as ctrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="ctrl.myField" name="myField" />
<div style="color: red">
{{ctrl.myField}}
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script src="controller.js"></script>
</body>
</html>
And in the controller.js:
angular.module('MyApp',[])
.controller('AppCtrl', [function() {
this.myField = "just to see it work";
}]);
In the above, I have put "myField" in the scope of the controller "AppCtrl". I have put the whole page under the control of the module 'MyApp'. You can either inject the model with "ng-bind" or use the curly bracket notation in the body of the div to bind to the "myField" model of "ctrl". I have used the latter but be aware this binding will be established after the page has been parsed.
If you load this all now, you should see "just see it work" in red under the text field, and also inside the text field. When you edit the text box, the red text will change in sync. Once you have that working, you will never want to stop learning more about Angular!
I should add that this model has a single attribute. To generalise this you will need to create a model with several properties (one for each input element), so that a JSON object is returned when the form is submitted.
You can't have dots in your variable name.
Try myFormMyFieldError instead of myForm.myField.$error.
Additional: Rather than using the attribute style, use a CSS file.
I'm new to angularjs and besides working on a project using angularjs I'm learning it as well. The query which I have, is relevant to the following code:-
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
Name:<input ng-model="name" type="text"/>
<br>
Name:<input ng-model="name" type="text"/>
<br>
Name:<input ng-model="name" type="text"/>
<br>
Hello {{name}}
</body>
</html>
In this code, there are ngModel directives with every input control and when I type in any one of the input control the value of other two input controls also update. I know ngModel directive binds input, select and textarea with property and changes in any of the control are detected in {{expression}} observing directive. But here I didn't see any {{expression}} observing directive in input controls. So, how the values in input controls are updated.
Can anybody shed some light on this?
I tried your code, it works in plunker. The "Hello ..." gets updated per character I type : http://plnkr.co/edit/U9IpmKNALfpAqNNhoTHa?p=preview
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
Name:
<input ng-model="name" type="text" />
<br>Name:
<input ng-model="name" type="text" />
<br>Name:
<input ng-model="name" type="text" />
<br>Hello {{name}}
</body>
</html>