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>
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>
My browser only renders : "{{ cust.name + ',' + cust.city }}"
index.html
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1em;
}
</style>
</head>
<body>
<div data-ng-controller="SimpleController">
Name :
<br>
<input type="text" data-ng-model="name">
<br>
<ul>
<li data-ng-repeat="cust in customers">{{ cust.name + ',' + cust.city }}</li>
</ul>
</div>
<script>
var demoApp = angular.module('demoApp', []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{name:'John', city:'Paris'},
{name:'Andy La', city:'Londra'},
{name:'George', city:'Berlin'}
];
});
demoApp.controller(controllers);
</script>
</body>
<script src="Scripts/angular.min.js"></script>
</html>
Its something wrong with my code??? Any ideea what can i do?
I have tryed some other ideeas from other sites and other people but it doesn't work. I dont know what do do anymore.
I am quite new with angularJS!
Thanks!
You need to refer the angular.js script inside the body tag
Also you have extra paranthesis at the end, remove it.
DEMO
var demoApp = angular.module('demoApp', []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{name:'John', city:'Paris'},
{name:'Andy La', city:'Londra'},
{name:'George', city:'Berlin'}
];
};
demoApp.controller(controllers);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="SimpleController">
Name :
<br>
<input type="text" data-ng-model="name">
<br>
<ul>
<li data-ng-repeat="cust in customers">{{ cust.name + ',' + cust.city }}</li>
</ul>
</div>
I have created a simple app with simple animations where I can add and remove items to an array (used ng-fx for animations), but I have a problem.
When I try to add new elements, I get ng-repeat duplicate error. I fixed it by adding track by $index, but this time a new error occurs. If I try to remove an element from the list, wrong one is being animated.
Here's my plnkr
http://plnkr.co/edit/hKk9VGHIE1GT2i3P8TtT?p=preview
Here's my code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="angular-animate.min.js"></script>
<script src="ng-fx.js"></script>
</head>
<body ng-app="app">
<div ng-controller="FirstController">
<div ng-repeat="name in names track by $index" class="fx-fade-normal">
{{name}}
<input type="submit" value="Remove" ng-click="remove($index)">
</div>
<input type="text" ng-model="name" />
<input type="submit" value="Add" ng-click="add()">
</div>
<script>
angular.module('app', ['ngAnimate', 'ng-fx']);
angular.module('app').controller('FirstController', ["$scope", function($scope) {
$scope.names = ["first", "second", "third", "fourth"];
$scope.add = function() {
$scope.names.push($scope.name);
};
$scope.remove = function($index) {
$scope.names.splice($index, 1);
};
}]);
</script>
</body>
</html>
It's simple change ng-repeat="name in names track by $index" to ng-repeat="name in names track by $id(name)"
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)
I have a working table with a filter:
http://plnkr.co/edit/WnV7OUplcLHVOKbeTrSw?p=preview
After wrapping it in a tabset it stops working (the filter is still updated):
http://plnkr.co/edit/8uw2UhSC59txms5X563L?p=preview
But it worked with old versions before I updated:
http://plnkr.co/edit/eJvYtpc3efkydsQy8caL?p=preview
(angular 1.0.8 + bootstrap 2.0.3 + angular-ui-bootstrap-0.6.0)
Why did it stop working after the update?
http://plnkr.co/edit/70sLuA4gltgxhwTE0XT1
HTML (Just modified the filter usage)
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="broken filter">
<form class="form-inline" role="form">
<select id="okFilterbox" ng-model="okFilterBool">
<option>nothing</option>
<option>all</option>
</select>
</form>
<p>{{okFilterBool}}</p>
<div>
<table>
<tr ng-repeat="item in items | filterItem:okFilterBool">
<td>{{item.name}}</td>
</tr>
</table>
</div>
</tab>
<tab heading="tab2">
</tab>
</div>
</body>
</html>
JS (Changed the way the filter is defined to make a new 'Angular' filter)
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
$scope.okFilterBool = "all";
$scope.items = [
{ name: 'A'},
{ name: 'B'},
{ name: 'C'}
];
};
angular.module("plunker").filter("filterItem", function(){
return function(array, okFilterBool){
if(okFilterBool == "all"){ return array; }
return [];
}
})