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;.
Related
For h1 tag nested ng-repeat is not working fine.
I know that we can access the parent data in nested ng-repeat using $parent. But this is not working for me.
If I replace h1 with div then this is working fine.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Ernst Handel",
]
$scope.records2 = [
"Alfreds Futterkiste2",
"Ernst Handel2",
]
$scope.records3 = [
"Alfreds Futterkiste3",
"Ernst Handel3",
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">
<h1 ng-repeat="y in records2">
<span>{{$parent.x}}</span>
<h1 ng-repeat="z in records3"></h1>
</h1>
</h1>
<div>
H1's cannot be nested. Angular is producing it right, but browser is closing tags too soon. Here is plunker without H1s and nested.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm = this;
vm.records = [
"Alfreds Futterkiste",
"Ernst Handel",
]
vm.records2 = [
"Alfreds Futterkiste2",
"Ernst Handel2",
]
vm.records3 = [
"Alfreds Futterkiste3",
"Ernst Handel3",
]
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<div ng-repeat="x in vm.records">
- <span>{{x}}</span>
<div ng-repeat="y in vm.records2">
--<span>{{y}}</span>
<div ng-repeat="z in vm.records3">
--- <span>{{z}}</span>
</div>
</div>
</div>
</div>
</body>
</html>
https://plnkr.co/edit/4f4Ef0V2YGCkZkv49bHl?p=info
angular will render different ng-repeat on each H1 tag.
so as per your data dom render like this
<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>
so we can not access siblings scope.
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>
Below I have some AngularJS code to parse some JSON which lists all categories. I would like to display each product associated with a category when you click the category button, so when you click a category button, it should display a list of all the products within that category below. Here's what I have so far:
(function() {
var app = angular.module('store', []);
app.controller('StoreController', ['$scope', function($scope) {
var vm = this;
$scope.products = [{
"category": "Cat1",
"name": "Product1"
}, {
"category": "Cat1",
"name": "Product2"
}, {
"category": "Cat2",
"name": "Product3"
}, {
"category": "Cat3",
"name": "Product4"
}]
$scope.categories = Object.keys($scope.products.reduce(function(categoryMap, product) {
categoryMap[product.category] = 1;
return categoryMap;
}, {}));
vm.selectCategory = function(category) {
vm.selectedCategory = category;
}
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="category in categories" class="category">
<button ng-click="vm.selectCategory(category);">{{category}}</button>
</div>
<!-- RESULTS -->
<div ng-repeat="product in vm.selectedCategory" class="product">
<p>{{product.name}}</p>
</div>
</body>
</html>
Since you are using controller as syntax, it is better to avoid all the $scope from your code. I am pushing all the products corresponding to selected category into a new array vm.selectedCategoryProjects.
(function() {
var app = angular.module('store', []);
app.controller('StoreController', ['$scope', function($scope) {
var vm = this;
vm.products = [{
"category": "Cat1",
"name": "Product1"
}, {
"category": "Cat1",
"name": "Product2"
}, {
"category": "Cat2",
"name": "Product3"
}, {
"category": "Cat3",
"name": "Product4"
}]
vm.categories = Object.keys(vm.products.reduce(function(categoryMap, product) {
categoryMap[product.category] = 1;
return categoryMap;
}, {}));
vm.selectCategory = function(category) {
vm.selectedCategoryProjects =[];
angular.forEach(vm.products,function(value,key){
if(value.category==category)
vm.selectedCategoryProjects.push(value.name);
});
}
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="category in vm.categories" class="category">
<button ng-click="vm.selectCategory(category);">{{category}}</button>
</div>
<!-- RESULTS -->
<div ng-repeat="product in vm.selectedCategoryProjects" class="product">
<p>{{product}}</p>
</div>
</body>
</html>
For this issue you can use filter. so after selected a category filter product based on.
(function() {
var app = angular.module('store', []);
app.controller('StoreController', ['$scope', function($scope) {
var vm = this;
$scope.products = [{
"category": "Cat1",
"name": "Product1"
}, {
"category": "Cat1",
"name": "Product2"
}, {
"category": "Cat2",
"name": "Product3"
}, {
"category": "Cat3",
"name": "Product4"
}]
$scope.categories = Object.keys($scope.products.reduce(function(categoryMap, product) {
categoryMap[product.category] = 1;
return categoryMap;
}, {}));
vm.selectCategory = function(category) {
vm.selectedCategory = category;
}
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="product in products" class="category">
<button ng-click="vm.selectCategory(product.category);">{{product.category}}</button>
</div>
<!-- RESULTS -->
<div ng-if="vm.selectedCategory" ng-repeat="product in products | filter:{category:vm.selectedCategory}" class="product">
<p>{{product.name}}</p>
</div>
</body>
</html>
just do this:
<!-- RESULTS -->
<div ng-repeat="product in products" class="product" ng-if="vm.selectedCategory && vm.selectedCategory === product.category">
<p>{{product.name}}</p>
</div>
i have a problem with my code , i already make a code with mouseover but it was very slow to display per row my picture edit , so i read that mouseenter is faster ( i hope because i have normaly 2000 row),
but i have a problems , it show me all the pictures when i go to the tr,
this is my full code html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-mouseenter="mouseIn($event)" ng-mouseleave="mouseOut($event)" ng-repeat="x in records">
<td>{{x}}</td>
<td>
<div class="editNucleo" ng-show="editNucleo">
<input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
</div>
</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
$scope.mouseIn = function (event) {
$scope.editNucleo = true;
}
$scope.mouseOut = function (event) {
$scope.editNucleo = false;
}
});
</script>
</body>
</html>
i need just display and hide the picture in the right row when i make the mouseenter , mouseleave
Your script dont know which specific index to show when mouse entered try this no function required
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-mouseenter="editNucleo = $index" ng mouseleave="editNucleo = null" ng-repeat="x in records">
<td>{{x}}</td>
<td>
<div class="editNucleo" ng-show="editNucleo == $index">
<input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
</div>
</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
];
$scope.editNucleo = null;
});
</script>
Hello I am learning angular 1 and I have problem at the very beggining.
I'm trying to display data with table in ng-repeat using controller. Angular in app stops working at all even {{ 2 + 2 }} on bottom of page doesn't work. I can't find the reason why.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SZYBKI START Z BRACKETS</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body ng-app="aplikacja">
<div class="container" ng-controller="kontrolerTabeliSkoczkow">
<h1 class="text-center">Klasyfikacja skoczków narciarskich</h1>
<br />
<div class="input-group">
<span class="input-group-addon">Szukaj: </span>
<input type="text" class="form-control" placeholder="np. Adam Małysz" />
</div>
<br />
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="naglowek in [
'Imię', 'Rok urodzenia', 'Narodowość'
]">{{ naglowek }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="skoczkowie in skoczkow">
<td>{{skoczek.Name}}</td>
<td>{{skoczek.Nation}}</td>
<td>{{skoczek.rank}}</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ 2+2 }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}];
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
You forgot to close the controller.
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}]);
</script>
(The ')' at the very end)
Also, I would declare Jquery BEFORE angular
It's typo mistake, change
app.contoller(...)
to
app.controller(...)
and close properly:
app.controller("kontrolerTabeliSkoczkow" , ['$scope', function( $scope ) { ... }]);
see link jsfiddle
A parenthesis is missing just between the ]} and ; at the end of your controller
Furthermore, I do not recommand using this notation, just don't declare dependencies in your controller, I recommand doing it this way :
app.controller("kontrolerTabeliSkoczkow", function($scope){
/*anything you want to put in it*/
});
You don't get confused by parenthesis, brackets and stuff, just declare your dependencies in your module, not in your controller