Here are the codes that I've written:
DRF Page [ http://localhost:8000/index/info/?format=json ]
[{"id": 1, "name": "Michel", "city": "Florida", "country": "United States"}, {"id": 2, "name": "Shuvo", "city": "London", "country": "United Kingdom"}]
2.html [this is my second attempt]
<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<script src="2.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in info">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
</body>
</html>
2.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://localhost:8000/index/info/?format=json")
.success(function(response) {
$scope.info = response;
});
});
My 2.html page shows NOTHING. It's completely blank. What am I doing wrong? :(
since django and angular use the same notation to display variables, you will have to use the verbatim tags for using {{}} as angular tags. Otherwise they will be treated as django tags.
I suspect it's something to do with the format of the data being returned in
$http.get("http://localhost:8000/index/info/?format=json")
What are you seeing in the console when http.get runs?
Here's a plunkr showing it working with your data
http://plnkr.co/edit/x0OtVbsnSMk3mdhRFEkc
Related
My code works only when my JSON is not nested. When there is no "," between data and I use only one block of JSON it works.
My Angular:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr ng-repeat="thing in info" ng-if="thing.color!=null">
<td>{{thing.color}}</td>
<td>{{thing.category}}</td>
<td>{{thing.type}}</td>
</tr>
<tr ng-repeat="thing in info" ng-if="thing.detail!=null">
<td>{{thing.detail}}</td>
<td>{{thing.item}}</td>
<td>{{thing.value}}</td>
</tr>
</table>
<button class="button" ng-click="click()">Button 1</button>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.click = function() {
$http.get("json.js").then(function (response) {
$scope.info=response;
});
};
});
</script>
</div>
</body>
</html>
And my JSON
[
{
"color": "black",
"category": "hue",
"type": "primary"
},
{
"detail": "white",
"item": "red",
"value": "silver"
}
]
Thanks
Please use $scope.info=response.data; instead of $scope.info=response;.
NG-click not firing in ng -repeat. I want to use ngclick to display only the specific element details.
<body ng-app="mainApp" >
<div ng-app = "mainApp" class="container" ng-controller="TableFilterController">
<table ng-app = "mainApp" class ="table table-hover">
<tr><th>Id</th><th>Name</th><th>Age</th><th>Role</th></tr>
<tr ng-repeat="p in details "><td>{{ $index + 1 }}</td><td><a ng-click="clickMe()">{{p.name}}</a></td><td>{{p.age}}</td><td>{{p.mass}}</td></tr>
</table>
</div>
</body>
js:
var mainApp= angular.module("mainApp", []);
mainApp.controller('TableFilterController', function($scope) {
$scope.clickMe = function(){
alert("hey");
}
There can be different-2 scenarios:
1. Remove Duplicate ng-app.
2.Use This Once,this will test if controller is calling onload or not
mainApp.controller('TableFilterController', function($scope) {
alert("its Calling");
$scope.clickMe = function(){
alert("hey");
}
Check you have mentioned controller name in routing.
4.Check your file's code is loading in browser.
Check these points on first priority otherwise try to create plunker so that everyone can look into your code.
Please try to remove ng-app in table tag, ng-app for application, only once you can use it.
Also no need for a tag for click event because a tag has href attribute.
Use button tag or any other tag rather than a tag.
Try this below code. There were some issues in your code.
The isseus in the code were as below
Script you provided was incomplete. There were some missing }, ] and )
Remove ng-app which are not required. It will not create any issues but its not a good practice to include the same ng-app attribute multiple times.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="mainApp">
<div class="container" ng-controller="TableFilterController">
<table class="table table-hover">
<tr><th>Id</th><th>Name</th><th>Age</th><th>Role</th></tr>
<tr ng-repeat="p in details "><td>{{ $index + 1 }}</td><td><a ng-click="clickMe()">{{p.name}}</a></td><td>{{p.age}}</td><td>{{p.mass}}</td></tr>
</table>
</div>
<script src="../lib/angular.js"></script>
<script>
var mainApp= angular.module("mainApp", []);
mainApp.controller('TableFilterController', function ($scope) {
$scope.details = [{ "name": "A1", "age": 10, "mass": 20, },
{ "name": "A2", "age": 15, "mass": 30, },
{ "name": "A3", "age": 20, "mass": 40, },
{ "name": "A4", "age": 30, "mass": 60, }]
$scope.clickMe = function () {
alert("hey");
}
});
</script>
I've nested json array in which i need to group with some values. I'm not able to fetch nested tag for grouping.
$scope.sampleTest = [{"id": "1", "cash": {"amount":"4000"}},
{"id": "2", "cash": {"amount":"2000"}}]
If i'm grouping 'id' its working and if i'm grouping 'cash.amount' its not working
Can anyone help me to solve this issue?
You can do,
<div ng-repeat="record in sampleTest | filter: {cash:{amount:'2000'}}:true ">
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.sampleTest = [{"id": "1", "cash": {"amount":"4000"}},
{"id": "2", "cash": {"amount":"2000"}},
{"id": "3", "cash": {"amount":"2000"}}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div ng-repeat="record in sampleTest | filter: {cash:{amount:'2000'}}:true ">
<ul>
<li >{{ record}}</li>
</ul>
</div>
</body>
</html>
while i am calling {{jeans.title}} in product page its not working.
my app.js code:-
<!-- Modules -->
var app = angular.module('GalleryApp', ['ngRoute']);
<!-- routeProvider -->
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/products/:id', {
controller: 'ProductsController',
templateUrl:'views/product.html'
})
.otherwise({ redirectTo: '/' });
});
<!-- Controllers -->
app.controller('HomeController', ['$scope', 'products', function($scope, products) {
products.success(function(data1) {
$scope.products = data1;
});
}]);
app.controller('ProductsController', ['$scope', 'products', '$routeParams', function($scope, products, $routeParams) {
products.success(function(data2) {
jeans = data2[$routeParams.id];
});
}]);
<!-- services -->
app.factory('products', ['$http', function($http) {
return $http.get('products.json')
.success(function(data) {
return data;
});
}]);
index.html:-
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" />
<!-- Include the core AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="GalleryApp">
<div ng-view></div>
<script src="js/app.js"></script>
</body>
</html>
home.html:-
<div class="container">
<div class="row" ng-repeat="men in products.mens">
<div class="col-sm-4" ng-repeat="jean in men.jeans">
<p>{{ jean.title }}</p>
<img ng-src="{{ jean.img }}" alt="{{ jean.brand }}" title="{{ jean.brand }}"/>
<h3>{{ jean.brand }}</h3>
<h4>{{ jean.model }}</h4>
</div>
</div>
</div>
product.html:-
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>{{ jeans.title }}</p>
</div>
</div>
</div>
Product.json:-
{
"mens": [
{
"name": "mens fasion",
"jeans": [
{
"title": "Slim fit",
"model": "slim 2527",
"brand": "Tommy Hilfiger",
"img": "images/mens/jeans/product_1.jpg",
"price": "2000",
"offer": "10"
},
{
"title": "Parallel",
"model": "Parallel-1575",
"brand": "Denim",
"img": "images/mens/jeans/product_2.jpg",
"price": "2500",
"offer": "15"
},
{
"title": "cargos",
"model": "cargos 2876",
"brand": "Lee Cooper",
"img": "images/mens/jeans/product_3.jpg",
"price": "3000",
"offer": "20"
}
]
}
]
}
while i am calling {{jeans.title}} in product page its not working.
In ProductsController
jeans = data2[$routeParams.id];
you are missing $scope.. It should be:
$scope.jeans = data2[$routeParams.id];
Also, it seems that you want to access the sub-object mens[0].jeans within your JSON object here:
$scope.jeans = data2.mens[0].jeans[$routeParams.id];
I'm new to Angular and I'm trying to set up a simple display. I've looked through the documentation on ng-repeat and have done some of the tutorials with success every time. However, when I went to do a mock of my own I can't get anything to show from the JSON file. Even using the often found Angular "todo.json" example found everywhere I still am unable to figure this one out. I'm not sure if it has to do something with JSON or possibly nesting the ng-repeat. Can anyone guide me to seeing the light?! hehe. Thanks in advance.
So, here's the Plunker link. http://plnkr.co/edit/8rNgPHUHEe88Gpw6aM1D
HTML:
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="Calendar">
<ul>
<li ng-repeat="items in events">
{{items.events}}
</li>
</ul>
</body>
</html>
JS:
var App = angular.module('App', []);
App.controller('Calendar', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.events = res.data;
});
});
JSON:
[
{
"events": [
{
"EventTitle": {
"href": "http://example.com/event1",
"text": "HEADLINE TEXT FOR EVENT 1"
},
"HeadlineImage": {
"href": "http://example.com/event1",
"src": "http://example.com/Image.jpg",
"text": "CAPTION TEXT FOR IMAGE "
},
"Eventdescription": "Lorem Loreem Loreeem Ipsum Ipsuum Ipsuuum ..."
}
]
}
]
Your data structure is pretty weird. Check an updated working plunker: http://plnkr.co/edit/SXHjqxjZ2bgJSs327jz4?p=preview
You can use <pre>{{ events | json }}</pre> in your view to easily inspect/debug objects.
If you must keep this structure, then you need to do something like this
<ul>
<li ng-repeat="items in events">
{{items.EventTitle.text}}</>
</li>
</ul>
controller:
App.controller('Calendar', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.events = res.data[0].events;
});
});
Here's a forked plunker
Edit:
The revised plunker, using the above changes. The scope var should be res.data.events
Updating after a new json structure provided:
Here's a working example with actual json data