I am new to angular js and I am practicing now filter. I am perfectly able to iterate over array of objects but when I am using object of objects my browser throws error :
"Uncaught SyntaxError: Unexpected token"
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCont">
<div ng-repeat="b in ar2">
{{b}}
</div>
{{a}}
</br></br>
{{c | myFilt}}
</br>
</br>
<div ng-repeat="(key,value) in d">
{{key.a|myFilt}}
</div>
</div>
</div>
<script src="jquery-3.0.0.js"></script>
<script src="angular.js"></script>
<script src="angular_try.js"></script>
</body>
</html>
And here is the angular js :
var myApp = angular.module("myApp",[])
myApp.controller("myCont",["$scope","$filter",function($scope,$filter){
$scope.a ="pro";
$scope.arr = ["abc","bcd","cdb"];
$scope.arr3 = [100,200,300];
$scope.ar2=[];
$scope.c = 10;
$scope.d = {{a:"mishtu",b:500,c:"mondal"},{a:"tulu",b:400,c:"mondal"},
{a:"titlu",b:600,"c":"mondal"}}
}])
An object contains value always in (key,value) pair but your object
$scope.d = {{a:"mishtu",b:500,c:"mondal"},{a:"tulu",b:400,c:"mondal"},
{a:"titlu",b:600,"c":"mondal"}}
is holding a list of objects, so you should have declared it as an array.
Like this
$scope.d = [{a:"mishtu",b:500,c:"mondal"},{a:"tulu",b:400,c:"mondal"},
{a:"titlu",b:600,"c":"mondal"}]
This is how it should be used:
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.title = 'Hello world';
$scope.d = [{
a: "mishtu",
b: 500,
c: "mondal"
}, {
a: "tulu",
b: 400,
c: "mondal"
}, {
a: "titlu",
b: 600,
"c": "mondal"
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div>{{title}}</div>
<table border="1" ng-repeat="myObj in d">
<tr ng-repeat="(x, y) in myObj">
<td>{{x}}</td>
<td>{{y}}</td>
</tr>
</table>
</div>
Related
Please find my my controller javascript file below -
angular.module('myApp', []);
angular.module('myApp').factory('myFactory', function () {
var myFactory = {};
myFactory.list = [];
myFactory.add = function (message) {
myFactory.list.push({ id: myFactory.list.length, text: message });
//return myFactory;
};
return myFactory;
});
angular.module('myApp').controller('Controller1', function (myFactory) {
var myVar = this;
myVar.myList = myFactory.List;
});
angular.module('myApp').controller('Controller2', function (myFactory) {
var myVar = this;
myVar.newMessage = 'Hello World!';
myVar.addMessage = function (message) {
myFactory.add(message);
myVar.newMessage = '';
};
});
And also my HTML file below -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp">
<div>
<h1>Services</h1>
<div' ng-controller="Controller1">
<p ng-repeat="m in myList">{{ m.id }}: {{ m.text }}</p>
</div'>
</div>
<div ng-controller="Controller2 as post">
<form ng-submit="post.addMessage(post.newMessage)">
<input type="text" ng-model="post.newMessage">
<button type="submit"
ng-click="post.addMessage(post.newMessage)">
Add Message
</button>
</form>
</div>
</body>
</html>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.js"></script>
I can't see the data returning by the 'Controller1'
When I run the code I can't see the result which is coming from Controller1, which means the list is not binding with the ng-controller in .html page
Please tell me where I am wrong.
You are not referencing your list properly:
<p ng-repeat="m in myList">{{ m.id }}: {{ m.text }}</p>
If you are going to use myVar to store your list, you should use Controller as syntax so that your template has a reference to the variable:
<div ng-controller="Controller1 as myVar">
<p ng-repeat="m in myVar.myList">{{ m.id }}: {{ m.text }}</p>
</div>
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>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a.{{replace}}">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d:[1,2,3,4,5],
f:[6,7,8,9]
};
$scope.call = function(val) {
$scope.replace='val';
}
});
</script>
</body>
</html>
I'm trying to add dynamically the values to ng-repeat content, but it's not working, please do help
can we add dynamically values to ng-repeat itself so we can change the iterating values every time by simply changing one value like above, if not is there any better ideas
The following snippet can help you.
<!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="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a[replace]">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope) {
$scope.a = {
d: [1, 2, 3, 4, 5],
f: [6, 7, 8, 9]
}
$scope.call = function (val) {
$scope.replace = val;
}
});
</script>
</body>
</html>
Explanation :
$scope.replace=val; //Assign the variable and not a string
<li ng-repeat="x in a[replace]"> // No need to use braces are you are in an ng tag already
Instead of passing strings you can pass the values in the call function then assign those values to $scope.replace which then update your ng-repeat
<!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="customersCtrl">
<button ng-click="call(a.d)">for d</button>
<button ng-click="call(a.f)">for f</button>
<ul>
<li ng-repeat="x in replace">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d: [1,2,3,4,5],
f: [6,7,8,9]
}
$scope.call = function(val){
$scope.replace=val;}
}
);
</script>
</body>
</html>
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.
Angular Controller return error when called through an app. But works when written directly.
My html code
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="fbapp">
<div ng-controller="fbController" class="container">
<input type="text" name="name" ng-model="name"/>
<input type="button" value="Fetch" ng-click="fetchUser()" class="btn btn-primary"/>
</form>
</div>
</body>
</html>
My js code
var fbapp = angular.module('fbapp', []);
fbapp.controller('fbController', function($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
}
Error I get
Error: [ng:areq] http://errors.angularjs.org/1.2.15/ng/areq?p0=fbController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
at wb (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:360)
at Qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:447)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:470
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:156
at r (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:7:386)
at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:18)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:45)
It work for me if I don't declare container in a an app. Like...
function fbController ($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
}
I am having no clue whats wrong.
as Stewie said you need to add closing parenthesis ' )'.
Example:
var app=angular.module('App', []);
app.controller('fbController', function($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
})
html:
<div ng-app="App" >
<div ng-controller="fbController">
<button ng-click="fetchUser()">click</button>
<p >{{name}}</p>
</div>
</div>
Live example: http://jsfiddle.net/choroshin/7Ws6w/1/