Consider the following code - it uses ng-bind to print the 2 models in an expression defined at the element level.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example16-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngBindHtmlExample">
<div ng-controller="ngBindHtmlCtrl">
<input type="text" ng-model='asd'/>
<input type="text" ng-model='asdasd'/><br>
<span ng-bind='asd +" "+ asdasd'> </span>
<p ng-bind-html="myHTML"></p>
</div>
</body>
</html>
now consider this code with ng-template which does exactly the same but only uses {{ }} in the expression
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example15-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
</head>
<body ng-app="">
<script>
function Ctrl($scope) {
$scope.salutation = 'Hello';
$scope.name = 'World';
}
</script>
<div ng-controller="Ctrl">
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br>
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>
</body>
</html>
What is the key purpose of the 2 directives and best practices for their cases ?
The difference between the two has been neatly discussed here.
In short you can't use ng-bind to bind multiple values to a single html element. But you can use ng-bind-template to do that. Of course you can make ng-bind work like ng-bind-template as you have done in the question. The main difference being the execution of multiple expressions. Also ng-bind is faster and since there is rarely any need to use multiple expressions, using ng-bind would be preferable.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">
<label class="control-label">Semester:</label>
<select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
<option value="{{v.SemesterId}}" ng-repeat="v in semesters">{{v.SemesterId}}</option>
</select>
<script>
var app=angular.module('myApp',[]);
app.controller('mc1',function($scope)
{
$scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';
})
</script>
</body>
</html>
When I run this page, I get the error error: [ngRepeat:dupes]. I tried to add track by $index but it totally doesn't work.
Can anyone tell me the reason?
Edit: Sorry I didn't explain clear. I use library in C# to convert a datatable object to json string. Then pass this to the web page through web api. In the script, I use angular.jsonFrom(response.data).
And response in browser is "[{\"SemesterId\":\"Fall 2017\"},{\"SemesterId\":\"Spring 2017\"}]". I have fixed the bug but I don't know why.
Thanks all. PS. Correct answer is followed.
<body ng-app="mySelect" ng-controller="myCt">
<select ng-model="mySelected1">
<option ng-repeat="x in data1">{{x.SemesterId}}</option>
</select>
<select ng-model="mySelected2" ng-options="x.SemesterId for x in data1">{{x.SemesterId}}</select>
<label ng-model="data1"></label>
<script>
var app = angular.module('mySelect', []);
app.controller('myCt', ['$scope', function ($scope) {
$scope.data1=angular.fromJson('[{\"SemesterId\":\"Fall 2017\"},{\"SemesterId\":\"Spring 2017\"}]');
}]);
</script>
</body>
You are passing string instead of array. So ng-repeat shows error when iterating.
Change below line;
$scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';
To
$scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];
JSFiddle Demo
Please see this Plunkr working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">
<label class="control-label">Semester:</label>
<select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
<option value="v.SemesterId" ng-repeat="v in semesters track by $index">{{v.SemesterId}}</option>
</select>
<script>
var app=angular.module('myApp',[]);
app.controller('mc1',function($scope)
{
$scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];
})
</script>
</body>
</html>
https://jsbin.com/fuvihatihi/1/edit?html,output
There was nothing to repeat in your semester variable, because there was quotes around array declaration.
Trying to do simple thing in AngularJS: form->if you put right word->button appears->u can click and go to a different page;(i didn;t try to put a link to the button since it doesn;t appear even without a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and the js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
problem: if i type in parola, the button does not appear
i am new to java script. thanks !
You should first read some angular tutorials, you have totaly wrong access to scope and you are using wrong $watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
And next thing, you are overkilling your code. You can inline it in template without any controller function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>
There are several errors here.
First, the password field is bound to MyCtrl.pass. But you're watching the value of $scope.pass
Second, $scope.$watch expects an angular expression to evaluate as argument, not a value to watch. So watching the string 'MyCtrl.pass' would be the correct thing to do.
Third, you shouldn't use a watch at all. You should just use ng-show="isPasswordValid(pass)"(see below), and return true or false from this function.
Fourth, instead of doing $scope.kPass = ($scope.pass == "parola"), you're inverting the value of $scope.kPass, but only if the value is correct. So if it goes from incorrect to correct, kPass will become true. Then if it becomes incorrect, kPass will stay true. And if it becomes correct again, it will become false.
So, to resume, all you need is
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
and
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};
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>
I wanted to make input mask, in case CNPJ.
Then I saw it here.
https://github.com/assisrafael/angular-input-masks/
But not getting to implement.
See the excerpt from my code, in which case it did not work.
<html>
<head>
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="js/masks.min.js"></script>
<script>
angular.module('ui.utils.masks');
</script>
</head>
<body ng-app>
<ul>
<li>Teste</li>
</ul>
<div>
<label>CNPJ:</label>
<input type="text" ng-model="cnpj" ui-br-cnpj-mask>
</div>
</body>
</html>
What is missing to work?
Declare module like below.
angular.module('app',['ui.utils.masks'])
And then change ng-app on HTML like below.
ng-app="app"
This would help you. Thanks.
What is the Simplest 'Hello World' in AngularJS for a beginner. So far I have this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-ng-app="">
{{'Hello World' }}
</div>
<script src="angular.js"></script>
</body>
</html>
Simplest Hello World that shows 2-way databinding
<!doctype html>
<html lang="en" ng-app>
<head>
<title> Hello World </title>
</head>
<body ng-controller="MainCtrl">
<h1>{{helloWorld}}</h1>
<input type="text" ng-model="helloWorld"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
function MainCtrl($scope){
$scope.helloWorld = "Hello World";
}
</script>
</body>
</html>
edit:
A bit of explanation on what is what and why this is (in my view) a minimal Hello World app showcasing the power of AngularJS
The AngularJS library needs to be included
The custom attribute ng-app is added to kick of the angular application. This directive signals AngularJS to auto-bootstrap an application
The ng-controller directive is added and it's associated javascript function shows exposing an object by assigning it to the injected $scope
The double brackets expression {{helloWorld}} shows the convention used by AngularJS to output model values.
The ng-model directive is used to bind the helloWorld object and shows the power of AngularJS two-way datababinding
Simplest AngularJS 'Hello World' - "The Good Way"
<!doctype html>
<html data-ng-app="myApp">
<head>
<!-- .... -->
</head>
<body>
<div data-ng-controller="MyController">
<input type="text" data-ng-model="name" />
<p>Hello {{name}}</p>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.name = "World";
}]);
</script>
</body>
</html>
Found on prettycode.org:
<!doctype html>
<html ng-app>
<head>
<title> Hello World </title>
</head>
<body>
Your name: <input type="text" ng-model="name"></input>
<p ng-show="name">Hi, {{ name }}!</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
</script>
</body>
</html>