Here I'm trying to add products from the products list to the cart.Products list is in the ProductCrtl. Using CartCrtl I'm trying to get the product values.
How can I fix the above error?
My Code-
<!doctype html>
<html lang="en" ng-app="MyApp4">
<head>
<meta charset="utf-8">
<title>Controllers</title>
<script src="angular.js"></script>
<script src="app4.js"></script>
</head>
<body ng-controller="MyApp4Crtl">
<table ng-controller="ProductCtrl">
<h1>Products</h1>
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.name}}</td>
<td>{{product.price | currency}}</td>
<td><button ng-click=addToCart(product)>Add to Cart</button></td>
</tr>
</tbody>
</table>
<div ng-controller="CartCrtl">
<h1>Cart</h1>
Adding products!
</div>
</body>
</html>
app4.js
name="MyApp4";
requires=[];
app4=angular.module(name,requires);
app4.controller("MyApp4Crtl",function($scope){
$scope.name1="Aluuu!";
});
app4.controller("ProductCtrl",function($scope,$rootScope){
$scope.products=[{name:"Computer",price:233},
{name:"Book",price:20},
{name:"Pen",price:2000},
{name:"Pencil",price:10},
{name:"box",price:11},
{name:"Laptop",price:10000},
{name:"CD",price:34},
{name:"DVD",price:3}
];
$scope.addToCart=function(item){
$rootScope.$broadcast("addProductEvent",item);
}
});
app4.controller("CartCtrl",function($scope){
$scope.cartItems=[];
$scope.$on("addProductEvent",addingCartFunction);
function addingCartFunction(evt,product){
$scope.cartItems.push(product);
}
});
The Cartctrl is not defined.I have included the ng-app in the html tag also.
here is a working example of yours
name="MyApp4";
requires=[];
app4=angular.module(name,requires);
app4.controller("MyApp4Crtl",function($scope){
$scope.name1="Aluuu!";
});
app4.controller("ProductCtrl",function($scope,$rootScope){
$scope.products=[{name:"Computer",price:233},
{name:"Book",price:20},
{name:"Pen",price:2000},
{name:"Pencil",price:10},
{name:"box",price:11},
{name:"Laptop",price:10000},
{name:"CD",price:34},
{name:"DVD",price:3}
];
$scope.addToCart=function(item){
$rootScope.$broadcast("addProductEvent",item);
}
});
app4.controller("CartCtrl",function($scope){
$scope.cartItems=[];
$scope.$on("addProductEvent",addingCartFunction);
function addingCartFunction(evt,product){
$scope.cartItems.push(product);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp4" ng-controller="MyApp4Crtl">
<div ng-controller="ProductCtrl">
<table >
<h1>Products</h1>
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.name}}</td>
<td>{{product.price | currency}}</td>
<td><button ng-click=addToCart(product)>Add to Cart</button></td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="CartCtrl">
<h1>Cart</h1>
Adding products!
{{cartItems}}
</div>
</div>
I think it is wrong type with
<div ng-controller="CartCrtl">
<div ng-controller="CartCtrl">
Solved!The error wasa typo.'CartCrtl' should be 'CartCtrl'.
Related
This AngularJS code works, but the problem is it shows the excel warning "This file format and extension of download.xls doesnt match", Is there a better way.
// Code goes here
var myApp=angular.module("myApp",[]);
myApp.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('MyCtrl',function(Excel,$timeout,$scope){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
var exportHref=Excel.tableToExcel(tableId,'WireWorkbenchDataExport');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
});
/* Styles go here */
.table-header
{
background-color: lightskyblue;
}
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/1.4.8/angular.js
"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body ng-controller="MyCtrl">
<h1>Export to Excel</h1>
<button class="btn btn-link" ng-click="exportToExcel('#tableToExport')">
<span class="glyphicon glyphicon-share"></span>
Export to Excel
</button>
<div id="tableToExport">
<table border="1">
<thead>
<tr class="table-header">
<th>Team</th>
<th>Process Type</th>
<th>Cedent</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 4</td>
<td>value 5</td>
<td>value 6</td>
</tr>
<tr>
<td>10.12.2015</td>
<td>AXA Affin</td>
<td>101024 - Quota Share QS</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
HI Im new to angular js im trying to display the json content as table.is it possible to change the color based on the value in the json content?
i've tried by adding ng-class which was not working.
Please find the code i've tried
angular.module('mApp')
.controller('mController', main);
function main($http) {
var vm = this;
vm.name = "sathya";
var jsonData = '{"header":{"columns":[{"name":"Services","subcolumns":[{"name":""}]},{"name":"Server1","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server2","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server3","subcolumns":[{"name":"Status"},{"name":"Action"}]}]},"rows":{"data":[[{"value": "Service1"}, {"value": "Running"}, {"value": "action"}, {"value": "Stopped"}, {"value": "Action"}, {"value": "Running"}, {"value": "Action"}],[{"value":"Service2"},{"value":"Running"},{"value": "Action"},{"value": "Stopped"},{"value":"Action"},{"value":"Running"},{"value": "Action"}]]}}';
vm.table = JSON.parse(jsonData);
vm.subHeaders = function () {
var subs = [];
vm.table.header.columns.forEach(function (col) {
col.subcolumns.forEach(function (sub) {
subs.push(sub);
});
});
return subs;
};
<!DOCTYPE html>
<html ng-app="mApp">
<head>
<meta charset="utf-8" />
</head>
<body ng-controller="mController as mn">
<div class="main">
<div class="bodycontent">
<div class="mainnav">
<div>
<table class="table table-bordered">
<tr>
<th colspan="{{col.subcolumns.length}}" ng-repeat="col in mn.table.header.columns">{{col.name}}</th>
</tr>
<tr>
<th ng-repeat="col in mn.subHeaders()">{{col.name}}</th>
</tr>
<tr ng-repeat="row in mn.table.rows.data">
<td ng-repeat="cell in row" ng-class="{'status_green' : cell.value=='Running', 'status_red' : cell.value=='Stopped'}">{{cell.value}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!---->
<script src="Scripts/angular.min.js"></script>
<script src="App/app.module.js"></script>
<script src="App/Main.js"></script>
</body>
</html>
you could use ng-if statement and try with this:
<div ng-repeat="i in jsonData" style="width:25%">
<table class="table table-bordered" ng-repeat="a in i.data">
<tr>
<th>Value</th>
</tr>
<tr ng-repeat="v in a">
<td ng-if="v.value !== 'Success'"> {{v.value}}</td>
<td ng-if="v.value === 'Success'" style="color:green"> {{v.value}}</td>
</tr>
</table>
</div>
plunker: http://next.plnkr.co/edit/99ySQe5flCzaDbax?preview
Hope it helps!
here what i did, and it's simple
<td><h6 ng-show="employee.status=='Active'" class="green">{{employee.status}}</h6><h6 ng-show="employee.status=='Deactive'" class="yellow">{{employee.status}}</h6> </td>
<body>
<div ng-app="myapp"ng-model="user"ng-init="user=[{'name':'A','email':'a#gmail.com','mobile':'9494563132','city':'banglore'},
{'name':'B','email':'B#gmail.com','mobile':'9494563132','city':'pune'},
{'name':'C','email':'C#gmail.com','mobile':'9494563132','city':'hyderebad'}] "ng-init="fuser='hello'">
<div ng-controller="myctrl" >
<table align="left">
<tr>
<td><ul>
<h1>City</h1>
<li ng-repeat="x in user">{{x.city}}</li>
</ul></td>
</tr>
</table>
<table align="center">
<tr>
<th>Select User</th>
<td>
<select ng-model="u" ng-change="getuser(name,email,mobile,city)">
<option value="">Choose name</option>
<option ng-repeat="x in user" value="{{x.name}}">{{x.name}}</option>
</select></td>
</tr>
<tr>
<table align="center" cellpadding="5" ng-model="table" bgcolor='skyblue'>
<caption><h2>User info</h2></caption>
<tr>
<th>Name</th>
<th>email</th>
<th>mobile</th>
<th>city</th>
</tr>
<tr ng-repeat="row in user|filter:fuser">
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.mobile}}</td>
<td>{{row.city}}</td>
</tr>
</table>
<tr>
</table>
</div>
</div>
<script>
var obj = angular.module("myapp",[]);
obj.controller("myctrl",function($scope)
{
$scope.u=this.response;}
$scope.getuser=function(uname)
{
$scope.fuser=uname;
}
});
please help me to extract the data from array into table by filtering the data using dropdown option and diplay the relevant data.i can not use $http event and i dont want to initializa my array in the controller
I remembered your requirement that you dont want to put your data in controller,but i dont know how to do that so i followed the regular procedure....Hope this will helps you
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.user=[{'name':'A','email':'a#gmail.com','mobile':'9494563132','city':'banglore'},
{'name':'B','email':'B#gmail.com','mobile':'9494563132','city':'pune'},
{'name':'C','email':'C#gmail.com','mobile':'9494563132','city':'hyderebad'}];
$scope.getuser=function(uname){
for(var i=0;i<$scope.user.length;i++){
if($scope.user[i].name==uname){
$scope.e=$scope.user[i];
}
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table align="left">
<tr>
<td><ul>
<h1>City</h1>
<li ng-repeat="x in user">{{x.city}}</li>
</ul></td>
</tr>
</table>
<table align="center">
<tr>
<th>Select User</th>
<td>
<select ng-model="x" ng-change="getuser(x)">
<option value="">Choose name</option>
<option ng-repeat="x in user" value="{{x.name}}">{{x.name}}</option>
</select></td>
</tr>
<tr>
<table align="center" cellpadding="5" ng-model="table" bgcolor='skyblue'>
<caption><h2>User info</h2></caption>
<tr>
<th>Name</th>
<th>email</th>
<th>mobile</th>
<th>city</th>
</tr>
<tr >
<td>{{e.name}}</td>
<td>{{e.email}}</td>
<td>{{e.mobile}}</td>
<td>{{e.city}}</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
I am creating a plunker for another question but I cannot get angular-datatables to sort without configuration.
I have code from a project that responds to sorting when users click on header columns but it just does not want to sort in plunkr.
Am I missing any sort of configuration or overlooking anything?
How do I make the table sortable using default settings?
Plunkr
https://plnkr.co/edit/71RqBQ0HF7ThDyZPpc1E?p=info
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.9.4" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script data-require="datatables#1.9.4" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="angular.js#1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="//rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl">
<div class="table-responsive">
<table datatable="ng" class="table" >
<thead style="background-color: #d8d8d8;">
<tr>
<th>Product</th>
<th>Tag Name</th>
<th>Unit Size</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr style="font-weight: 100;" ng-repeat="data in items | filter:{ TagName: filterTag, TagId: filterId} | filter:searchText" >
<td class="td-line-height" style="font-weight: 600;';">{{data.Product}}</td>
<td class="td-line-height">{{data.TagName}} </td>
<td class="td-line-height">{{data.UnitSize}} </td>
<td class="td-line-height">{{data.UnitCost | currency}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
for some reason angular-datatables.js is calling isDataTable function while jquery.dataTables.js defines this function as fnIsDataTable, so, to solve it, just add
$.fn.dataTable.isDataTable = $.fn.dataTable.fnIsDataTable;
as your first line in your controller.
here is the error message:
VM892 angular.js:9563TypeError: $.fn.dataTable.isDataTable is not a function
at Object.renderDataTable (VM1134 angular-datatables.js:753)
at Object.hideLoadingAndRenderDataTable (VM1134 angular-datatables.js:773)
at VM1134 angular-datatables.js:910
at VM892 angular.js:13777
at completeOutstandingRequest (VM892 angular.js:4236)
at VM892 angular.js:4537
updated plunker: https://plnkr.co/edit/TgpWLuiTDbb91yJeHYoX?p=preview
It doesn't list with ng-repeat. What is wrong with this code snippet?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="MyApp">
<div ng-init="courses = [{"Number":"CREOO11","Name":"Design Pattern 101","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO12","Name":"Design Pattern 102","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO13","Name":"Design Pattern 103","Instructor":"Yunus Emre KESKIN"}]">
<div class="row">
<table>
<tr>
<th> Course Number </th>
<th> Course Name </th>
<th> Instructor </th>
</tr>
<tr ng-repeat="c in courses">
<td> {{c.Number}} </td>
<td> {{c.Name}} </td>
<td> {{c.Instructor}} </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
There were two issues in the above code:
1. MyApp angular module is not available while you have used it in your html file
2. Way to initialized courses is not correct
Correct code is attached below:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyCntrl', function($scope) {
$scope.courses = [{"Number":"CREOO11","Name":"Design Pattern 101","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO12","Name":"Design Pattern 102","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO13","Name":"Design Pattern 103","Instructor":"Yunus Emre KESKIN"}];
});
</script>
<body>
<div ng-app="MyApp">
<div ng-controller="MyCntrl">
<div class="row">
<table>
<tr>
<th> Course Number </th>
<th> Course Name </th>
<th> Instructor </th>
</tr>
<tr ng-repeat="c in courses">
<td> {{c.Number}} </td>
<td> {{c.Name}} </td>
<td> {{c.Instructor}} </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>