This is my code
index.html
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle"/>
<hr/>
<h1>Favorite Player - {{ lchandle }}</h1>
</div>
</body>
app.js
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope' , '$filter' , function( $scope , $filter )
{
$scope.handle = "";
var tolower = function(){
return $filter('lowercase')($scope.handle);
}
$scope.lchandle = tolower();
}]);
The favorite player does update when I change in the input
Can you please tell me what I am doing wrong?
You can achieve this by adding a $watch for the variable and variable
DEMO
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter )
{
$scope.$watch('handle', function() {
$scope.handle = $filter('lowercase')($scope.handle);
});
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle"/>
<hr/>
<h1>Favorite Player - {{ handle }}</h1>
</div>
</body>
You need to pass a function instance, instead of its result after calling it. So change it from $scope.lchandle = tolower(); to $scope.lchandle = tolower;.
Then you can call (execute) it with <h1>Favorite Player - {{ lchandle() }}</h1>
var myApp = angular.module("myApp", []);
var controller = myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.handle = "";
var tolower = function() {
return $filter('lowercase')($scope.handle);
}
$scope.lchandle = tolower;
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle" />
<hr/>
<h1>Favorite Player - {{ lchandle() }}</h1>
</div>
</body>
Unless you are planning to change your filter, I suggest to use a different syntax for filters:
<h1>Favorite Player - {{ handle | lowercase }}</h1>
Based on previous answer by Sajeetharan I made version with ng-change, which I think is easier to figure out and more modern.
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter )
{
$scope.lowercase = function() {
$scope.lhandle = $filter('lowercase')($scope.handle);
};
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle" ng-change="lowercase()"/>
<hr/>
<h1>Favorite Player - {{ lhandle }}</h1>
</div>
</body>
Related
Please look at the following code:
<html lang="en" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flexbox" >
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
$scope.buttons = ['a','b', 'c'];
}]);
I expect to see three <p> items. However, it looks like ng-repeat is ignored and I see an empty page.
Do you know what is the problem?
For your convenience: http://codepen.io/CrazySynthax/pen/yVwWdo
Use this.buttons instead of $scope.buttons since you are using controller as syntax
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
this.buttons = ['a','b', 'c'];
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app='flexbox'>
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
Since you are using controller as syntax you can change your ctrl like so:
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", [function() {
var vm = this;
vm.buttons = ['a','b', 'c'];
}]);
hope it helps.
Your variable is in $scope, so you can just loop over it with:
<p ng-repeat="item in buttons"> {{item}} </p>
Instead of
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
Forked your Codepen here.
Following Code is not showing or updating the value of nam in <p> tag. Kindly help !
<html ng-app>
<head></head>
<body>
<input ng-model = "nam.a" ng-controller = "myControl">
<p> Hello {{nam.a}} </p>
<script>
function myControl($scope){
$scope.nam = {
a : "abcdefg"
};
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>
You should specify the app module in html page.
<html ng-app="Test">
<body ng-controller = "myControl">
<input ng-model = "nam.a"/>
<p> Hello {{nam.a}} </p>
Then inject the module and controller like as below.
var app = angular.module('Test', []);
app.controller('myControl', function($scope) {
$scope.nam = {
a : "abcdefg"
};
});
In your code there is no ng-app created, ng-controller is binded in wrong way also. This is the right implementation. Look at the example.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myControl">
<input ng-model="nam.a" >
<p> Hello {{nam.a}} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope) {
$scope.nam = {
a: "abcdefg"
};
});
</script>
</body>
</html>
you should write like this
<body ng-controller="myControl">
<input ng-model = "nam.a">
<p> Hello {{nam.a}} </p>
</body>
https://plnkr.co/edit/M5n5Zb3v3J9W9Mx65cub?p=preview
<html>
<body ng-app="yourAppName">
<div ng-controller="myControl">
<input ng-model="nam.a">
<p> Hello {{nam.a}} </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
angular.module('yourAppName', [])
.controller('myControl', function($scope) {
$scope.nam = {
a: 'abcdefg'
}
});
</script>
</body>
</html>
use angular to create a module (in the example, I called it yourAppName), which you reference in the HTML in the ng-app directive
move the ng-controller directive to a parent element for wherever you reference things on $scope
create a controller by using angular.module(...).controller() instead of just creating a random JavaScript function
I have a ng-repeat on a div which shows value from an array in the controller. The div is commented when I do the inspect element in the browser. I have an outer div with the ng-controller on it.
This is the html file:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>
<script type="text/javascript" src="../js/controller.js"></script>
<!-- <base href="localhost:5000/"/> -->
<base href="/"/>
</head>
<body>
<div ng-controller="firstController">
First name:<input type="text" ng-model="firstName"><br>
Last name:<input type="" ng-model="lastName"><br>
<input type="button" ng-click="loadView()" value="submit" name="">
<p>{{firstName}}</p>
<div ng-repeat="data in array">
{{data.name}}
</div>
</div>
</body>
</html>
This is the controller:
var app = angular.module('myapp',['ngRoute']);
// var app = angular.module('myapp',[]);
app.config(function($routeProvider,$locationProvider){
$routeProvider.when('/index',{
templateUrl:'./view/index.html',
controller:'firstController'
})
.when('/second/:firstName/:lastName',{
templateUrl:'./view/second.html',
controller:'secondController'
})
.otherwise({redirectTo:'/index'})
$locationProvider.html5Mode(true);
})
app.controller('firstController',function($scope,$location){
$scope.firstName = "";
$scope.lastName="";
$scope.loadView = function(){
$location.path('/second/'+$scope.firstName+"/"+$scope.lastName);
}
var arrays = [
{name:ab}, {name:ba}, {name:ac}, {name:ca}
];
$scope.array = arrays;
})
.controller('secondController',function($scope,$routeParams){
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
And also, when I try to navigate to second.html on button click which calls the loadView() in the controller, I see the url in the address bar has changed but it still shows the content of the first html(index.html).
The values for the array should be in single quotes unless they are variables. So instead of {name:ab} just do {name:'ab'}
Check out the snippet
var app = angular.module('myapp', []);
// var app = angular.module('myapp',[]);
app.controller('firstController', function($scope, $location) {
$scope.firstName = "";
$scope.lastName = "";
$scope.loadView = function() {
$location.path('/second/' + $scope.firstName + "/" + $scope.lastName);
}
var arrays = [{
name: 'ab'
}, {
name: 'ba'
}, {
name: 'ac'
}, {
name: 'ca'
}];
$scope.array = arrays;
})
.controller('secondController', function($scope, $routeParams) {
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="firstController">
First name:
<input type="text" ng-model="firstName">
<br>Last name:
<input type="" ng-model="lastName">
<br>
<input type="button" ng-click="loadView()" value="submit" name="">
<p>{{firstName}}</p>
<div ng-repeat="data in array">
{{data.name}}
</div>
</div>
</body>
</html>
The div gets commented when the object is empty.
Make sure that your $scope.object has the data that you want.
I am new to learning AngularJs and stuck at this particular error. Can't seem to find the reason behind this error. Any help will be appreciated.
I am using AngularJs 1.2.
Please advise.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body ng-app="Heirarchy">
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
<script type="text/javascript">
var app = angular.module("Heirarchy",[]);
app.controller("ParentController",function($scope){
$scope.person = {greeted:false};
});
app.controller("ChildController",function($scope) {
$scope.sayHello = function(){
$scope.person.name="Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>
Update your code
Insert ng-app="your module name" in your html tag, and do not repeat ng-app in your app
<!doctype html>
<html ng-app="Heirarchy">
<head>
</head>
<body>
<div ng-controller="ParentController">
</div>
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("Heirarchy", []);
app.controller("ParentController", function ($scope) {
$scope.person = { greeted: false };
});
app.controller("ChildController", function ($scope) {
$scope.sayHello = function () {
$scope.person.name = "Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>
I am following some tutorials on AngularJS, but the below code is not working for me
<!DOCTYPE html>
<html ng-app="simpleApp">
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="entry in collection"> {{ entry }} </li>
</ul>
</div>
</body>
</html>
and below is my index.js code
var app = angular.module("simpleApp", []);
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
};
})
According to the tutorials output must be
first
second
third
but my output is
{{ entry }}
You have a random }; in your code
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
};
})
Should be:
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
})