This code not working. directly print {{ name | uppercase }}..
can you help me out.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<p>Name:<input type="text" ng-model="name">
</p>
<h3>{{ name | uppercase }}</h3>
Your ng-controller is missing
Try this:
<div ng-app="myApp" ng-controller="caseCtrl">
<input type="text" ng-model="txt" />
<h3>{{txt | uppercase}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('caseCtrl', function($scope) {
$scope.txt = "Hello World!";
});
</script>
Related
I have a simple form in angularjs, that inputs value a and value b. when I click the button, I want the values to be alerted out. How do I do that?
<div ng-controller="myController">
<p><label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" /></p>
<p><label>value b : </label><input name="valueb" id="valueb" ng-model="valueb"/></p>
<button type="button" ng-click = "add()" >Sign In</button>
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
function myController($scope) {
$scope.add = function(){
alert("valuea:"+$scope.valuea);
alert("valueb:"+$scope.valueb);
}
};
}]);
There are certain issues with your code. In your html there is no module myApp. Also within your controller callback, there is no need to add the separate function with the controller name function myController() {}.
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.add = function(){
alert("valuea: "+$scope.valuea);
alert("valueb: "+$scope.valueb);
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<p><label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" /></p>
<p><label>value b : </label><input name="valueb" id="valueb" ng-model="valueb"/></p>
<button type="button" ng-click = "add()" >Sign In</button>
</div>
</div>
See working fiddle - https://jsfiddle.net/otqzk6ua/
Here is the answer :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<p>
<label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" />
</p>
<p>
<label>value b : </label><input name="valueb" id="valueb" ng-model="valueb" />
</p>
<button type="button" ng-click="add()">Sign In</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.add = function() {
alert("valuea:" + $scope.valuea);
alert("valueb:" + $scope.valueb);
}
});
</script>
</body>
</html>
I want to display checkboxes inside ng repeat. The checkboxes are not displayed. The checkboxes are not displayed at all. I am not understanding what the misatke is. Here is the code -
<div class = "col s4">
<form ng-submit="$ctrl.todoAdd()">
<input type="text" ng-model="$ctrl.todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in $ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
<p><button ng-click="$ctrl.remove()">Remove marked</button></p>
</div>
And the javascript code-
angular.
module('dashboard').
component('dashboard', {
templateUrl: 'dashboard/dashboard.html',
controller: ['$routeParams','$http',
function dashboardController($routeParams,$http) {
this.todoList = [{todoText:'Clean House', done:false}];
this.todoAdd = function() {
this.todoList.push({todoText:this.todoInput, done:false});
this.todoInput = "";
};
this.remove = function() {
var oldList = this.todoList;
this.todoList = [];
angular.forEach(oldList, function(x) {
if (!x.done) this.todoList.push(x);
});
};
//Rest of the controller code
}
]
});
You need to have empty dependencies passed to your module while declaring,
change it as,
angular.
module('dashboard',[]).
DEMO
var app = angular.module('myFirstApp', []);
app.controller('myCtrl', function () {
this.todoList = [{
"todoText": "run today",
"done": false
},
{
"todoText": "read today",
"done": false
}];
});
<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myCtrl as ctrl">
<div ng-repeat="x in ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
</div>
</body>
</html>
I've built a basic Angular app that successfully displays the results of an HTTP GET request.
I'd like to include fallback code that displays two static HTML elements in place of the remote content if the GET request fails.
I can just call a vanilla JS function to do DOM manipulation, but I'd like to do this the Angular way. I've read a lot of documentation and articles, but I'm not seeing a straightforward way to do this. Code below.
I'd like to replace the call to updateUIError() with Angular code that performs the same task.
Here's a Plunk: https://plnkr.co/edit/PDwSUCXGNW2cwAIwl9Z9?p=streamer
HTML:
<div class="scene fullheight" id="attractions" ng-app="listApp">
<article class="content">
<h1>Upcoming Events</h1>
<div class="main" ng-controller="ListController as eventsList">
<div class="search">
<label>search: </label>
<input ng-model="query" placeholder="Search for events" autofocus>
<label class="formgroup">by:
<select ng-model="eventOrder" ng-init="eventOrder='start.local'">
<option value="start.local">Date</option>
<option value="name.text">Name</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked>
ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse">
descending
</label>
</div>
<ul class="eventlist">
<li class="event cf" ng-repeat="item in eventsList.events | filter: query | orderBy: eventOrder:direction">
<div class="info">
<h2>{{item.name.text}}</h2>
<p>{{item.start.local | date:"dd MMMM ', ' h:mma"}}</p>
</div>
</li>
</ul>
</div>
</article>
</div>
Angular:
angular.module('listApp', [])
.controller('ListController', ['$scope', '$http', function($scope,$http) {
var eventsList = $scope.eventsList;
$http.get(URI)
.success(function(data) {
console.log(data);
eventsList.events = data.events;
}).error(function() {
updateUIError();
});
}]);
function updateUIError() {
var events = document.querySelector('#attractions article');
events.innerHTML = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
}
You need to create a static error and show it when the error occurs using ngIf
<div class="scene fullheight" id="attractions" ng-app="listApp">
<div ng-controller="ListController">
<article class="content" ng-if="hasUIError">
<h1>Local Attractions</h1>
<p>There's lots to do nearby.</p>
</article>
<article class="content" ng-if="!hasUIError">
<h1>Upcoming Events</h1>
<!-- REST OF THE HTML -->
</article>
</div>
</div>
Then, in your controller, you need to set the flag to false by default:
$scope.hasUIError = false;
And when there's an error in the ajax, set it to true
$http.get(URI).then(
function(response) {
console.log(response);
$scope.events = response.data.events;
},
function() {
$scope.hasUIError = true;
}
);
Before solving your issue, there is another issue to address. Specifically, since you are using the ControllerAs approach, you'll want to attach your variables to 'this' rather than $scope.
Then you create a variable called showError that will get evaluated in showing the message. Then you can use the ng-show directive to hide/show the message.
angular.module('listApp', [])
.controller('ListController', ['$http',
function($http) {
var vm = this;
vm.events = [];
vm.showError = false;
$http.get(URI)
.success(function(data) {
vm.events = data.events;
}).error(function() {
vm.showError = true;
});
}
]);
<!DOCTYPE html>
<html ng-app="listApp">
<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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ListController as eventsList">
<div class="scene fullheight" id="attractions">
<div ng-show="eventsList.showError">
<h1>Local Attractions</h1>
<p>There's lots to do nearby.</p>
</div>
<article class="content">
<h1>Upcoming Events</h1>
<div class="main">
<div class="search">
<label>search:</label>
<input ng-model="query" placeholder="Search for events" autofocus>
<label class="formgroup">by:
<select ng-model="eventOrder" ng-init="eventOrder='start.local'">
<option value="start.local">Date</option>
<option value="name.text">Name</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked>ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse">descending
</label>
</div>
<ul class="eventlist">
<li class="event cf" ng-repeat="item in eventsList.events | filter: query | orderBy: eventOrder:direction">
<div class="info">
<h2>{{item.name.text}}</h2>
<p>{{item.start.local | date:"dd MMMM ', ' h:mma"}}</p>
</div>
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
Do something like this:
angular.module('listApp', [])
.controller('ListController', ['$scope', '$http', function($scope,$http) {
var eventsList = $scope.eventsList;
$http.get(URI)
.success(function(data) {
console.log(data);
eventsList.events = data.events;
}).error(function() {
eventsList.errorMessage = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
});
}]);
In the HTML, add a span inside the scope of ListController that will have ngModel="errorMessage". You can add additional property to show / hide the error span and main content div.
I have a php session variable set in index.php file. Using ng-init I am assigning that session value to a variable so that I can use in my angularjs controller file.
This is my index.php file
<body ng-app="myApp">
<div ng-controller="restaurantController" ng-init="total=0;something='<?php echo $_SESSION['rname'] ?>'" class="container">
<div class="col l4 s4 container">
<label>Search</label> <input type="text" ng-model="search.name">
</div>
<div ng-repeat="item in items | filter:search" class="container">
<h3>{{item.name}}</h3>
<p>category:{{item.category}}</p>
<p>price:INR {{item.price}} /-</p>
<br/>
<button ng-hide="item.added" ng-click="process(item)">Add</button>
<button ng-show="item.added" class="ng-cloak">Remove</button>
</div>
<h1>Total:<span ng-model="total">{{total}}</span></h1>
</div>
<script src="../angular/app.js"></script>
<script src="../angular/restaurantController.js"></script>
<script src="../materialize/js/materialize.min.js"></script>
</body>
Here the variable something is assigned to a php session variable.
But I am getting undefined when I use $scope.something in controller file.
This is my controller file
var myApp = angular.module('myApp',[]);
myApp.controller('restaurantController',['$scope','$http', function($scope, $http){
$http.get($scope.something+'.json').success(function (data){
$scope.items = data;
});
$scope.process = function(item){
$scope.total = parseInt($scope.total) + parseInt(item.price);
item.added=true;
}
}]);
The value of $scope.something is undefined in controller file but in php file I am getting the correct value.
<body ng-app="myApp" ng-init="total=0;something='<?php echo $_SESSION['rname'] ?>'">
<div ng-controller="restaurantController" class="container">
<div class="col l4 s4 container">
<label>Search</label> <input type="text" ng-model="search.name">
</div>
<div ng-repeat="item in items | filter:search" class="container">
<h3>{{item.name}}</h3>
<p>category:{{item.category}}</p>
<p>price:INR {{item.price}} /-</p>
<br/>
<button ng-hide="item.added" ng-click="process(item)">Add</button>
<button ng-show="item.added" class="ng-cloak">Remove</button>
</div>
<h1>Total:<span ng-model="total">{{total}}</span></h1>
</div>
<script src="../angular/app.js"></script>
<script src="../angular/restaurantController.js"></script>
<script src="../materialize/js/materialize.min.js"></script>
</body>
Got the solution. just had to change the position of ng-init so that the variables can e initialized as soon as the page loads.
How do you use multiple controllers for AngularJS 1.3.8?
I've tried the following below but only the first controller outputs correctly and the second controller outputs with {{ name }} and {{ age }}.
HTML:
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div ng-app="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function(){ // Logs the amount of times name changes
console.log($scope.name);
});
}]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope', function($scope) {
$scope.name = "John";
$scope.age = "22";
}]);
</script>
You cannot have more than 1 ng-app directive in the same document. You would need to manually bootstrap the other. Other wise only the first instance of ng-app will be bootstrapped automatically by angular.
Other issue is that there is no provider called $scope2, you need to inject $scope.
Example:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div id="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
</script>
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div id="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
</script>
If your intention is to use just one module and bind other controllers to it. Then just have one ng-app and register your controller to app1.
Create a module:
angular.module('app', []);
Register a controller:
angular.module('app').controller('Ctrl1', ctor);
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]).controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);;
</script>
Why not just define 2 controllers for 1 app?
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<p>Person</p>
<div ng-controller="myCtrl">
First name <input type="text" ng-model="firstName"><br>
Last name <input type="text" ng-model="lastName"><br>
Birthday <input type="date" ng-model="birthday"><br>
{{firstName+' '+lastName}} was born on {{birthday}}
</div>
<div ng-controller="myCtrl2" ng-init="">
<p>The third result is {{ points[2] }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
$scope.birthday= new Date();
});
app.controller('myCtrl2', function($scope) {
$scope.points=[1,15,19,2,40];
});
</script>
</body>
</html>