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>
Related
I have a view where the user gives an input and display it in another view.
view 1:
<ion-content ng-controller="controller">
<input type="text" ng-model="name">
<button ng-click="save()">Save</button>
Controller:
$scope.save = function () {
$scope.displayName = $scope.name;
$state.go('app.viewTwo');
}
View 2:
<ion-content ng-controller="controller">
{{displayName}}
</ion-content>
Its known, that whenever a view is loaded the controller is initialized fresh every time. So how to display the value from the first view, in another view.
You need to use a service or factory to use the variable across the controllers.
DEMO:
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
$scope.getnames = function(){
$scope.names = names.get();
}
}
);
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
You can also use $rootScope , but it is not a recommended way.
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'm new to AngularJS and am trying to use it to link up with a simple web API I have in place. I already have URLs that return JSON data in the format: http://127.0.0.1:8000/posts/ followed by a date in the format YYYY-MM-DD. (example would be http://127.0.0.1:8000/posts/2015-07-28)
I have an input text box which I want to use to get the JSON data from my API and list it out, meaning if I enter 2015-07-28 into the input box, it should pull the JSON data from the API appropriately without a page refresh by appending the string value from the input box onto whatever URL I want (in this case that would be http://127.0.0.1:8000/posts/).
Here is what I have as of right now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
});
</script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
Use ng-change or watch your model. Depending on your input you may want to use the debounce in ng-model-options.
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
function getPost() {
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
}
// option #1 with ng-change="change()"
$scope.change = function() {
getPost();
}
// option #2 with watch
$scope.$watch('select', function (val, old) {
console.log(val);
getPost();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model-options="{ debounce: 500 }" ng-change="change()" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
function ContactController($scope) {
$scope.contacts = [];
$scope.items = [ ];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items[0].lateLoader = ' xxxx ';
});
}, 1000);
$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body >
<div ng-app="" ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
</p>
{{ contacts.length }}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
</ul>
</div>
</body>
</html>
In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script >
angular.module("app",[]).controller('ContactController',['$scope',
function($scope) {
$scope.contacts = [];
$scope.items = [];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items.lateLoader = 'xxxx ';
});
}, 1000);
//$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
]);
</script>
</head>
<body >
<div ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader">
<img src="https://encrypted-tbn1.gstatic.com
/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM">
</i>
</p>
{{contacts.length}}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts">
<input name="" type="checkbox" value="">{{ contact }}
</li>
</ul>
</div>
</body>
</html>
And for more detail of angularJs please visit these links:(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)
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/