Is posibble in AngularJS1.X by using ng-repeat directive, for JSON named weeks_and_days:
`[{
"week_nr": "1",
"day_nr": "1,2,3,4,5,6,7"
}, {
"week_nr": "2",
"day_nr": "8,9,10,11,12,13,14"
}, {
"week_nr": "3",
"day_nr": "15,16,17,18,19,20,21"
}, {
"week_nr": "4",
"day_nr": "22,23,24,25,26,27,28"
}, {
"week_nr": "5",
"day_nr": "29,30,31"
}]`
to get each and every day_nr, so for example, for week_nr: 1 I would sepearte results as: "1" "2" "3" "4" "5" "6" "7" ?
If it is possible how should the AngularJS {{expression}} look in this case? If it's not possible, how would have to be this JSON constructed to achive my goal?
For the request in comment I'm attaching the html files, index.html:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Calendar </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<!-- Include the core AngularJS library -->
<script src="https://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="CalendarApp">
<div ng-view>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/DaysController.js"></script>
<!-- Services -->
<script src="js/services/days.js"></script>
</body>
</html>`
and the view test.html:
`<div ng-repeat="week in weeks_and_days">
<p> {{week}} </p>
</div> `
var app = angular.module('myApp',[]);
app.controller('ctrl', function($scope){
$scope.weeks_and_days = [{
"week_nr": "1",
"day_nr": "1,2,3,4,5,6,7"
}, {
"week_nr": "2",
"day_nr": "8,9,10,11,12,13,14"
}, {
"week_nr": "3",
"day_nr": "15,16,17,18,19,20,21"
}, {
"week_nr": "4",
"day_nr": "22,23,24,25,26,27,28"
}, {
"week_nr": "5",
"day_nr": "29,30,31"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<div ng-repeat="week in weeks_and_days">
<p>Week : {{week.week_nr}}</p> <p>Days : {{week.day_nr}}</p>
<div>
</body>
I hope this will help.Please add the necessory style. Always consider grouping multiple data as arrays, and pass numbers as numbers itself, It will increase the performance. Thanks #Manikandan for the reference code. Thank you.
var app = angular.module('myApp',[]);
app.controller('ctrl', function($scope){
$scope.weeks_and_days = [{
"week_nr": 1,
"day_nr": [1,2,3,4,5,6,7]
}, {
"week_nr": 2,
"day_nr": [8,9,10,11,12,13,14]
}, {
"week_nr": 3,
"day_nr": [15,16,17,18,19,20,21]
}, {
"week_nr": 4,
"day_nr": [22,23,24,25,26,27,28]
}, {
"week_nr": 5,
"day_nr": [29,30,31]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<table>
<tr><th>Week</th><th>Day</th></tr>
<tr ng-repeat="week in weeks_and_days"><td>{{week.week_nr}}</td><td ng-repeat="day in week.day_nr">{{day}} </td></tr>
</table>
</body>
Considering your JSON is in your scope. Can't you use an ng-repeat to repeat through your weeks_and_days like:
ng-repeat="week in weeks_and_days"
Then use the following expressions to display them:
{{week.week_nr}}
{{week.day_nr}}
Related
I am trying to fetch data in AngularJS using Http Get request. I have created a separate controller.js file where I have implemented Http get service.
I have created a database.json file within the app.When I am trying to run my app on http-server, I am unable to fetch data from the data file created.
I am getting the following error in my console.
index.html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--Route Guard -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-controller="datactrl">
<ul>
<h4>Name And Age Of The persons</h4>
<li ng-repeat="person in persons">
{{ person.Name+ ':' + person.Age }}
</li>
</ul>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", [ ]);
app.controller('datactrl', function($scope, $http) {
$http.get('http://127.0.0.1/AngularJS/HttpGet/database.json')
.then(function(response) {
$scope.persons = response.records;
});
});
database.json:
{
"records": [
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
}
]
}
Can anybody please help me to resolve this issue..?
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>
I am trying to build the select item component using angular js. But it is not selecting the correct default selected value.
I am initializing the select item value as {"brandSetCode":1,"bannerColor":null,"fontColor":null};
But it always selects the last element. How to solve this issue?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
</head>
<body ng-app="sanitizeExample">
<script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope, $sce) {
$scope.initSelectItem ={"brandSetCode":null,"bannerColor":null,"fontColor":null};
$scope.mySelectableItems =[{
"label": "All",
"value": {
"brandSetCode": null,
"bannerColor": null,
"fontColor": null
}
}, {
"label": "SPIRITS",
"value": {
"brandSetCode": 1,
"bannerColor": null,
"fontColor": null
}
},
{
"label": "WINES",
"value": {
"brandSetCode": 3,
"bannerColor": null,
"fontColor": null
}
}
];
}]);
</script>
<div ng-controller="ExampleController">
<select name="brand"
data-ng-model="initSelectItem"
data-ng-options="brand.value as brand.label for brand in mySelectableItems track by $index">
</select>
</div>
</body>
</html>
Use ng-init() and initialize the default option.
<select ng-init="initSelectItemDefault()" ng-model="initSelectItem" ng-options="brand.label for brand in mySelectableItems">
</select>
And in controller
$scope.initSelectItemDefault = function(){
$scope.initSelectItem = $scope.mySelectableItems.filter(e => e.label == "All")[0];
}
DEMO
You need to remove the track by or manually compare them because track by adds a field named $$hash in the model.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
</head>
<body ng-app="sanitizeExample">
<script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope, $sce) {
$scope.initSelectItem = {};
$scope.mySelectableItems =[{
"label": "All",
"value": {
"brandSetCode": -1,
"bannerColor": -1,
"fontColor": -1
}
}, {
"label": "SPIRITS",
"value": {
"brandSetCode": 1,
"bannerColor": null,
"fontColor": null
}
}
];
}]);
</script>
<div ng-controller="ExampleController">
<select name="brand" ng-init="initSelectItem = mySelectableItems[0].value"
data-ng-model="initSelectItem"
data-ng-options="brand.value as brand.label for brand in mySelectableItems">
</select>
</div>
</body>
</html>
This is my code
// Code goes here
var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', '$log', function ($scope, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ name: 'firstName',cellTemplate:'<a ng-model=firstName></a>'},
{ name: 'lastName'},
{ name: 'Hyperlink',
cellTemplate:'<div>' +
' Click me' +
'</div>' }
];
$scope.gridOptions.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>
This is my plunker:- http://plnkr.co/edit/WFSbpkYv91af3uAbBnIp?p=preview
In the above code display firstname without link format.but i want to display firsname column data in link format.
Here is an example of cellTemplate that will display the name
cellTemplate:'{{ row.entity.firstName }}'
http://plnkr.co/edit/F5PS4nCzLkywnSzazMNx
Regards,
Eric
I want to pass JSON string into ng-click
here is the JSON string:
{"id":0,"parentID":0,"SubMenuItems":[],"imageName":"Icon.png","moduleName":"No Menu"}
HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<h1>Hello Plunker!</h1>
<button ng-click="go({
"id": 0,
"parentID": 0,
"SubMenuItems": [],
"imageName": "Icon.png",
"moduleName": "No Menu"
})">GOOOOOOOOOOOOOO!!!!!!!!!!</button>
</body>
</html>
JS:
// Code goes here
var app = angular.module('app', []);
app.controller('appCtrl', ['$scope',
function($scope) {
$scope.go = function(parm) {
alert('hi');
};
}
]);
PLUNKER
There are two problems. The first is that you need to declare ngController directive ng-controller="appCtrl" on some element. The second one is that you have to take ngClick attributes in quotes and then pass object without quotes into go function. Angular will understand that you are passing and object:
<body ng-app="app" ng-controller="appCtrl">
<h1>Hello Plunker!</h1>
<button ng-click='go({
"id": 0,
"parentID": 0,
"SubMenuItems": [],
"imageName": "Icon.png",
"moduleName": "No Menu"
})'>GOOOOOOOOOOOOOO!!!!!!!!!!</button>
</body>
Demo: http://plnkr.co/edit/8WuuhbCaZBom05ep576K?p=preview