Is there a way to nest angular templates?
for example having the following variables:
$scope.myVar = 'hello {{name}}, you weigh {{weight}}'
$scope.name = '';
$scope.weight = '';
And having the html file looking something like:
<h1>{{myVar}}</h1>
<div>
Your Name:
<input ng-model="name" type="text">
</div>
<div>
Your Weight:
<input ng-model="weight" type="text">
</div>
And then have angular dynamically setting the name and weight template from myVar?
I think that you are looking for is meaningless. You could define a function like below and then call this function in the header.
$scope.myVar = function() {
return 'hello ' + $scope.name + ' you weigh '+ $scope.weight;
}
var app = angular.module('app',[]);
app.controller('mainController',['$scope', function($scope){
$scope.name = "test";
$scope.weight = 100;
$scope.myVar = function() { return 'hello ' + $scope.name + ' you weigh ' + $scope.weight; };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
</head>
<body ng-app="app">
<div ng-controller="mainController">
<h1>{{myVar()}}</h1>
<div>
Your Name:
<input ng-model="name" type="text"/>
</div>
<br/>
<div>
Your Weight:
<input ng-model="weight" type="text"/>
</div>
</div>
</body>
</html>
I ended up realizing that I had scoping errors. So, to solve the binding errors, I used $interpolate. See: How to evaluate angularjs expression inside another expression
Sure you would just do:
<h1>Hello {{name}} you weigh {{weight}}</h1>
<div>
Your Name:
<input ng-model="name" type="text">
</div>
<div>
Your Weight:
<input ng-model="weight" type="text">
</div>
Related
I'm trying to write a simple "Hello World" application with AngularJS.
I would expect the function greeting() to print the name inserted in the text input in real time, but instead I get simply {{greeting()}} in output. What's wrong?
<!doctype html>
<body ng-app="myApp">
<div ng-controller="userController">
<p>Name: <input type="text" ng-model="user.name"></p>
<p>Surname: <input type="text" ng-model="user.surname"></p>
<p>{{greeting()}}</p>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("userController",
function ($scope) {
$scope.user = {name: "Mario", surname: "Rossi"};
$scope.greeting = function() {
return "Hello " +
$scope.user.name + " " +
$scope.user.surname + "!"
};
});
</script>
</body>
</html>
Here's an example: I would like to see Hello John Smith! instead of {{greeting()}}.
You forgot to include the AngularJS JavaScript.
Otherwise it works fine:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="userController">
<p>Name: <input type="text" ng-model="user.name"></p>
<p>Surname: <input type="text" ng-model="user.surname"></p>
<p>{{greeting()}}</p>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("userController",
function($scope) {
$scope.user = {
name: "Mario",
surname: "Rossi"
};
$scope.greeting = function() {
return "Hello " +
$scope.user.name + " " +
$scope.user.surname + "!"
};
});
</script>
</body>
Can anyone please explain to me how to create a custom service for displaying the array .the array is created inside the service and a function savedata() which saves the objects in the array.like wise another function i want to create which will display the array. thanks in advance
<!DOCTYPE html>
<html ng-app="noteApp">
<head>
<title>Note App</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="noteCtrl">
<form name="noteForm">
NoteId: <input type="number" name="id" ng-model="note.id" required>
NoteTitle: <input type="text" name="title" ng-model="note.title" required>
NoteDiscription: <input type="text" name="discription" ng-model="note.discription" required><br><br>
<button ng-click="add()" ng-disabled="noteForm.$invalid">Click</button>
</form>
<div ng-repeat="number in noteArray track by $index">
<h3>{{::number.id}}</h3>
<h3>{{::number.title}}</h3>
<h3 >{{::number.discription}}</h3>
</div>
</div>
<script>
var app=angular.module('noteApp',[]);
app.service('dataService',function(){
var noteArray=[];
this.saveData=function(data){
console.log(noteArray);
return noteArray.push(data);
}
this.displayData=function(){
//return zz;
}
});
app.controller('noteCtrl',function($scope,dataService) {
$scope.add=function(){
dataService.saveData($scope.note);
//dataService.displayData();
}
});
</script>
</body>
</html>
You are on the right track, just return the array inside the displayData()
this.displayData=function(){
return noteArray;
}
DEMO
var app=angular.module('noteApp',[]);
app.service('dataService',function(){
var noteArray=[];
this.saveData=function(data){
console.log(noteArray);
return noteArray.push(data);
}
this.displayData=function(){
return noteArray;
}
});
app.controller('noteCtrl',function($scope,dataService) {
$scope.noteArray=[];
$scope.add=function(){
dataService.saveData($scope.note);
$scope.noteArray = dataService.displayData();
}
});
<html ng-app="noteApp">
<head>
<title>Note App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="noteCtrl">
<form name="noteForm">
NoteId: <input type="number" name="id" ng-model="note.id" required><br><br>
NoteTitle: <input type="text" name="title" ng-model="note.title" required>
<br><br>
NoteDiscription: <input type="text" name="discription" ng-
model="note.discription" required><br><br>
<button ng-click="add()" >Click</button>
</form>
<div ng-repeat="number in noteArray track by $index">
<h3 >{{number.id}}</h3>
<h3 >{{number.title}}</h3>
<h3 >{{number.discription}}</h3>
</div>
</div>
</body>
</html>
Well I think that you need some like that:
'use strict';
app.factory('$shared',[function(){
function foo() {
var self = this;
self.list = [];
}
return new foo();
}]);
app.controller('mainCtrl', ['$scope', '$shared', function($scope, $shared){
$scope.shared = $shared;
//... many things here
$scope.onClick = function() {
// be sure that, I use "shared" from $scope, no directly like "$shared"
$scope.shared.list.push("val1");
console.log("my shared array:", $scope.shared.list);
}
}]);
app.controller('secondCtrl', ['$scope', '$shared', function($scope, $shared){
$scope.shared = $shared;
//... many things here
$scope.onKeyPress = function() {
// be sure that, I use "shared" from $scope, no directly like "$shared"
$scope.shared.list.push("val2");
console.log("my shared array:", $scope.shared.list);
}
}]);
Controller:
angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
$scope.d = { v1: '100', v2: '20' };
});
Template:
<div ng-app="myApp">
<div ng-controller="MainCtrl">
1: <input type="text" ng-model="d.v1" />
2: <input type="text" ng-model="d.v2" />
<h4>{{d.v1}} < {{d.v2}} = {{d.v1 < d.v2}}</h4>
</div>
</div>
http://jsfiddle.net/GDfxd/292/
This example incorrectly shows that 100 is less than 20. Any advice how to make this comparison numeric ?
the type of your variable is "text" you have to change it to "number" to get the right result.
All that you need is to compare numbers instead of strings
Here is the working snippet:
angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
$scope.d = { v1: 100, v2: 20 };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
1: <input type="text" ng-model="d.v1" />
2: <input type="text" ng-model="d.v2" />
<h4>{{d.v1}} < {{d.v2}} = {{d.v1 < d.v2}}</h4>
</div>
</div>
Try this, I just added an Eval function and left everything else the same!
Controller:
angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
$scope.d = { v1: '100', v2: '20' };
$scope.eval = function() {
return (parseInt($scope.d.v1, 10) < parseInt($scope.d.v2, 10));
}
});
Template:
<div ng-app="myApp">
<div ng-controller="MainCtrl">
1: <input type="text" ng-model="d.v1" />
2: <input type="text" ng-model="d.v2" />
<h4>{{d.v1}} < {{d.v2}} = {{eval()}}</h4>
</div>
</div>
http://jsfiddle.net/jc4vvp86/2/
I want the first typed letter turn into a capital letter, but struggeling with Angular. Maybe it is a little detail that I missed out, so a fresh eye to look at this would be helpful.
var app = angular.module("todoApp", []);
app.filter("NameInput", function(){
return function(input, scope){
if (input!=null)
input = input.toLowerCase();
return input.substring(0,1).toUpperCase()+input.substring(1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="todoApp" ng-cloak>
<div id="wrapper">
<div ng-controller="NameInput">
<label>Name:</label>
<input id="name-input" type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}</h1>
</div>
</div>
</body>
Here you go...
I think this might help you
var app = angular.module("todoApp", []);
app.filter("NameInput", function() {
return function(input) {
if (input != null) {
input = input.toLowerCase();
return input.substring(0, 1).toUpperCase() + input.substring(1);
}
}
})
.controller('NameInput', function($scope) {
$scope.yourName = "";
});
<body ng-app="todoApp" ng-cloak>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div id="wrapper">
<div ng-controller="NameInput">
<label>Name:</label>
<input id="name-input" type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName | NameInput}}</h1>
</div>
</div>
</body>
I have to compare both the string and get the uncommon result.
I have tried the below code which gives the output whether the result comparison is true or false.
I want to get the result of uncommon words in a variable.
<div ng-app="myApp" ng-controller="myCtrl">
<form novalidate>
<h3>User 1</h3>
Name: <input type="text" ng-model="user1.name">
Age: <input type="number" ng-model="user1.age">
<h3>User 2</h3>
Name: <input type="text" ng-model="user2.name">
Age: <input type="number" ng-model="user2.age">
<div>
<br/>
<input type="button" value="Compare" ng-click="compare()">
</div>
User 1: <pre>{{user1 | json}}</pre>
User 2: <pre>{{user2 | json}}</pre>
Equal: <pre>{{result}}</pre>
Uncommon words: <pre>{{compare}}</pre>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.user1 = {};
$scope.user2 = {};
$scope.result;
$scope.compare = function() {
$scope.result = angular.equals($scope.user1, $scope.user2);
};
});
</script>
Could someone suggest me some idea to proceed with this ?