My Index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="client/delljson.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl" style="background-color:orange;">
<h1><marquee width="40%" direction="right" >Resume</marquee></h1>
<a href='#!/main'>Press</a>
<div ng-view>
</div>
</body>
</html>
My Main.html
<div class="row">
<div class="col-md-4">
<h2><u>Personal Information</u></h2>
<p>{{deljson.personalInformation.name}}</p>
<p>{{deljson.personalInformation.dob}}</p>
<p>{{deljson.personalInformation.fatherName}}</p>
<p>{{deljson.personalInformation.gender}}</p>
<p>{{deljson.personalInformation.nationality}}</p>
<p>{{deljson.personalInformation.maritalStatus}}</p>
</div>
<div class="col-md-4">
<h3><u>Educational Information</u></h3>
<h4><u>SSLC</u></h4>
<p>{{deljson.educationInformation.sslc.institueName}}</p>
<p>{{deljson.educationInformation.sslc.studyBoard}}</p>
<p>{{deljson.educationInformation.sslc.percentage}}</p>
<p>{{deljson.educationInformation.sslc.yearOfPassedout}}</p>
<h4><u>HSC</u></h4>
<p>{{deljson.educationInformation.hsc.institueName}}</p>
<p>{{deljson.educationInformation.hsc.studyBoard}}</p>
<p>{{deljson.educationInformation.hsc.percentage}}</p>
<p>{{deljson.educationInformation.hsc.yearOfPassedout}}</p>
<h4><u>UG</u></h4>
<p>{{deljson.educationInformation.ug.institueName}}</p>
<p>{{deljson.educationInformation.ug.studyBoard}}</p>
<p>{{deljson.educationInformation.ug.percentage}}</p>
<p>{{deljson.educationInformation.ug.yearOfPassedout}}</p>
</div>
<div class="col-md-4">
<h3><u>Work Experience</u></h3>
<p>{{deljson.experience.previousExperience.companyName}}</p>
<p>{{deljson.experience.previousExperience.Position}}</p>
<p>{{deljson.experience.previousExperience.period}}</p>
<p>{{deljson.experience.previousExperience.responsibility}}</p>
</div>
</div>
My Js and Json File
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl : 'main.html',
controller : 'first'
})
}]);
app.controller('first', ['$scope', '$locationProvider', function($scope){
$location.path("/main.html" );
}]);
app.controller('myCtrl', function($scope) {
$scope.deljson = {
"personalInformation": {
"name": "Raaj Kumar",
"dob": "13/5/1994",
"fatherName": "Suresh",
"gender": "Male",
"nationality": "Indian",
"maritalStatus": "Single"
},
"educationInformation": {
"sslc": {
"institueName": "G.K.S.V.V.J.C",
"studyBoard": "CBSE",
"percentage": "45%",
"yearOfPassedout": "2009"
},
"hsc": {
"institueName": "S.V.M.H.S.S",
"studyBoard": "Matriculation",
"percentage": "55%",
"yearOfPassedout": "2011"
},
"ug": {
"institueName": "S.T. Peter'S Engineering College",
"course": "B.Tech (It)",
"percentage": "59%",
"yearOfPassedout": "2016"
}
},
"experience": {
"previousExperience": {
"companyName": "Purple Soft Technology",
"Position": "SEO Analyst",
"period": "2018-19",
"responsibility": "SEO"
}
},
"personalSkills": [
"Gaming"
],
"technicalSkills": [
"Digital Marketing",
"HTML",
"CSS",
"JS"
]
}
});
The Objective is to make a anchor text and link the main ,html to it and when clicked it should display the main.html in my ng-view.
I tried many methods watching the you tube but its not working out. the ng-view is displaying a template but its not displaying an template url.
I have solved the problem, but there was numerous errors in the code (missing doctype, divs without end tags and so on), so I have recoded a lot of it. I have taken out the $locationprovider, IMO its not so great a feature, people cant bookmark the page,(unless you make a lot of changes in ie. HTACCESS). So I dont like it.
I have also updated angularjs to 1.7.8.
If you want to use locationprovider, please note that there was some changes to it when upgrading to 1.7.8.
INDEX.HTML
<!DOCTYPE html>
<html ng-app="myApp">
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js"></script>
<script src="/client/delljson.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<body ng-controller="myCtrl" style="background-color:orange;">
<h1><marquee width="40%" direction="right">Resume</marquee></h1>
Press
<ng-view></ng-view>
</body>
</html>
AngularJS
var app = angular.module('myApp', ['ngRoute']);
app.controller('first', function($scope){
});
app.config(function($routeProvider) {
$routeProvider.when('/main', {
templateUrl : 'main.html',
controller:'first'
}).
otherwise({
redirectTo: '/'
});
});
app.controller('myCtrl', function($scope) {
$scope.deljson = {
"personalInformation": {
"name": "Raaj Kumar",
"dob": "13/5/1994",
"fatherName": "Suresh",
"gender": "Male",
"nationality": "Indian",
"maritalStatus": "Single"
},
"educationInformation": {
"sslc": {
"institueName": "G.K.S.V.V.J.C",
"studyBoard": "CBSE",
"percentage": "45%",
"yearOfPassedout": "2009"
},
"hsc": {
"institueName": "S.V.M.H.S.S",
"studyBoard": "Matriculation",
"percentage": "55%",
"yearOfPassedout": "2011"
},
"ug": {
"institueName": "S.T. Peter'S Engineering College",
"course": "B.Tech (It)",
"percentage": "59%",
"yearOfPassedout": "2016"
}
},
"experience": {
"previousExperience": {
"companyName": "Purple Soft Technology",
"Position": "SEO Analyst",
"period": "2018-19",
"responsibility": "SEO"
}
},
"personalSkills": [
"Gaming"
],
"technicalSkills": [
"Digital Marketing",
"HTML",
"CSS",
"JS"
]
}
});
Related
I am using https://wix.github.io/angular-tree-control/#multi-selection to work on tree structure example.I am not getting the expected result in a proper format.Below is the code and also attached plunkr to it.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<link href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
</head>
<div ng-app="app">
<div ng-controller="myController">
<treecontrol class="tree-classic"
tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee: {{node.name}} age {{node.age}}
</treecontrol>
</div>
</div>
angular.module('app', ['treeControl'])
.controller('myController', function() {
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
$scope.dataForTheTree =
[
{ "name" : "Joe", "age" : "21", "children" : [
{ "name" : "Smith", "age" : "42", "children" : [] },
{ "name" : "Gary", "age" : "21", "children" : [
{ "name" : "Jenifer", "age" : "23", "children" : [
{ "name" : "Dani", "age" : "32", "children" : [] },
{ "name" : "Max", "age" : "34", "children" : [] }
]}
]}
]},
{ "name" : "Albert", "age" : "33", "children" : [] },
{ "name" : "Ron", "age" : "29", "children" : [] }
];
});
Here is the attached plunkr https://plnkr.co/edit/bQHOIQ2HDPr4WJaukB8I?p=preview
I noticed that two things are missing:
The context-menu module is missing.
There is no rel="stylesheet" in added CSS links.
Even though angular-tree-control readme says:
Include context-menu module if you're going to use menu-id attribute
I found issues reported in their GitHub page like this one, which is due to missing context-menu module.
Add following line to include context-menu module:
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
Also please update link elements to include rel attribute like follows:
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
There is no need to add CSS as in Plunker which is the duplicate of above links.
Hope this fixes your issues. Here is the full code of a working example:
angular.module('app', ['treeControl'])
.controller('myController', ['$scope', function($scope) {
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
$scope.dataForTheTree = [{
"name": "Joe",
"age": "21",
"children": [{
"name": "Smith",
"age": "42",
"children": []
},
{
"name": "Gary",
"age": "21",
"children": [{
"name": "Jenifer",
"age": "23",
"children": [{
"name": "Dani",
"age": "32",
"children": []
},
{
"name": "Max",
"age": "34",
"children": []
}
]
}]
}
]
},
{
"name": "Albert",
"age": "33",
"children": []
},
{
"name": "Ron",
"age": "29",
"children": []
}
];
}]);
treecontrol.tree-classic li .full {
display: none;
}
treecontrol.tree-classic li .empty {
display: inline;
}
treecontrol.tree-classic li .tree-selected .full {
display: inline;
}
treecontrol.tree-classic li .tree-selected .empty {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body ng-app="app">
<div ng-controller="myController">
<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions" on-selection="showSelected(node)" selected-node="node1">
<span class="fa fa-square-o empty"></span>
<span class="fa fa-square full"></span> employee: {{node.name}} age {{node.age}}
</treecontrol>
</div>
</body>
</html>
UPDATE on 10/08/2018: edited the code snippet to add checkboxes using FontAwsome.
I use this library to show charts in my AngularJS application and it works fine:
AngularJS charts
The only thing I could not get done is to show the legend. Does anyone know how to do it?
Use legend: {display: true} in options
DEMO
angular.module("app", ["chart.js"])
.controller("BarCtrl", function($scope) {
$scope.options = {legend: {display: true}};
$scope.commonEstimationStats = {
rates: [{
"direction": {
"id": 13,
"name": "health",
"type": 1
},
"points": 5
}, {
"direction": {
"id": 14,
"name": "education",
"type": 1
},
"points": 3
}]
};
$scope.labels = [];
$scope.data = [];
angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
$scope.labels.push(key.direction.name);
$scope.data.push(key.points);
})
$scope.datasetOverride = [{
fill: true,
backgroundColor: [
"#66ff33",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#ffff00",
"#46BFBD",
"#FDB45C"
]
}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body>
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels" chart-options="options"></canvas>
</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 would like to use tabs to hide and show items in an ng-repeat. Is it possible to change the value of a scope like so?
<a ng-click="packageType = '1'">Package 1</a><a ng-click="packageType ='2'">Package 2</a><a ng-click="packageType = '3'">Package 3</a>
<div ng-repeat="item in packages" ng-show="packageType >=item.packageID">
{{item.name}}</div>
and the scope:
$scope.packages = [...{ "name": "some name",
"packageID": 1}...]
Where packageID can be 1, 2 or 3?
Here's the code that does exactly what your asking
Plunker
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div ng-controller="TabCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active" select="onTabSelected(tab.slug)">
{{ tab.packageId }}
</tab>
</tabset>
</div>
<script type="text/javascript" charset="utf-8">
angular.module('app', ['ui.bootstrap']).config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
controller: 'MainCtrl'
}).when('/room/:id', {
controller: 'RoomCtrl',
}).when('/dashboard', {
controller: 'DashboardCtrl'
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(false);
}]);
var TabCtrl = function($scope) {
$scope.tabs = [{
slug: 'dashboard',
name: "Package 1",
packageId: "some package #1"
}, {
slug: 'room-1',
name: "Package 2",
packageId: "some package #2"
}, {
slug: 'room-2',
name: "Package 3",
packageId: "some package #3"
}];
};
RoomCtrl = function($scope, $location) {
};
DashboardCtrl = function($scope, $location) {
};
MainCtrl = function($scope, $location) {
$scope.onTabSelected = function(tab) {
var route;
if (typeof tab === 'string') {
switch (tab) {
case 'dashboard':
route = tab;
break;
default:
route = 'rooms/' + tab;
break;
}
}
$location.path('/' + route);
};
};
</script>
</body>
</html>
I would write a function that encapsulates what you want to happen on click. That would make it easier to understand.
So I assume packages is an array and what you posted is not your complete code.
You will want to change your ng-show to say
ng-show="packageType == item.packageID"
this will only show the div if the packageID is the same as the package type. Your ng-click should work fine. You will want to set a default value for packageType somewhere in your controller however so something shows initially
You code has a few problems:
You first ng-click is does not have a closing quote.
<a ng-click="packageType = '1'>Package 1</a>
You set packageType to a string when it is a number later:
packageType ='2'
$scope.packages = { "name": "some name",
"packageID": 1}
You don't need {{}} in the ng-show
ng-show="packageType >={{item.packageID}}"
I think you meant for packages to be an array instead of an object:
$scope.packages = { "name": "some name",
"packageID": 1}
Example of how to do it is below. I set it to show on the second and third links :
(function() {
'use strict';
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController($scope) {
var vm = this;
$scope.packageType = 1;
$scope.packages = [{
"name": "some name1",
"packageID": 2
}, {
"name": "some name2",
"packageID": 2
}, {
"name": "some name3",
"packageID": 2
}, {
"name": "some name4",
"packageID": 3
}, {
"name": "some name5",
"packageID": 3
}, {
"name": "some nam6",
"packageID": 3
}];
}
ExampleController.$inject = ['$scope'];
})();
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController">
<a ng-click="packageType = 1">Package 1</a>
<a ng-click="packageType = 2">Package 2</a>
<a ng-click="packageType = 3">Package 3</a>
<p ng-repeat="item in packages" ng-show="packageType >= item.packageID">{{item.name}}
</p>
</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