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>
Related
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'.
I have a text box where I enter an idNumber. I want to check if that id number appears in my table. If it does, I want to add a glyphicon to that row.
Now, my problem is that I don't know how to access ng-model="idNumber" from ng-if.
I try using ng-if="data.id== {{idNumber}}" but that does not work.
<div class="container" id="inputDiv">
<div>
<input type="text" class="form-control" ng-model="idNumber">
</div>
</div>
<div class="container col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Id number</th>
<th>Name</th>
<th>Type</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in idData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.dokumenttype}}</td>
<td>
<span ng-if="data.id== {{idNumber}}">
<span class="glyphicon glyphicon-asterisk"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
Use like this:
<span ng-if="data.id === idNumber">
You do not need to put an expression here, just replace it as,
<span ng-if="data.id===idNumber">
<span class="glyphicon glyphicon-asterisk"></span>
</span>
DEMO
var myApp=angular.module('myApp',[]);
myApp.controller('thecontroller',function($scope){
$scope.idData = [{
"id": "1",
"name": "Kimberlyn",
"documentType": "McGaw"
}, {
"id": "2",
"name": "Harmony",
"documentType": "Sedworth"
}, {
"id": "3",
"name": "Adela",
"documentType": "Blenkin"
}];
});
<!DOCTYPE html>
<html>
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
</head>
<body ng-app="myApp">
<div ng-controller='thecontroller'>
<div class="container" id="inputDiv">
<div>
<input type="text" class="form-control" ng-model="idNumber">
</div>
</div>
<div class="container col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Id number</th>
<th>Name</th>
<th>Type</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in idData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.dokumenttype}}</td>
<td>
<span ng-if="data.id === idNumber">
<span>test</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<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 have a tree in a table. I would like to know how to add drag and drop functionality to the below tree using angularjs. Any help would be much appreciated. Plunkr added click here.
// html file
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
<h1>
Tree Table and Checkbox with AngularJS
</h1>
<hr>
<div class="wrapper" data-ng-app="testApp" data-ng-controller="treeTable">
<table class="table-nested">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
</th>
<th class="cell-members">
Version
</th>
<th>
Size
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="'table_tree.html'" data-ng-repeat="item in list"></tbody>
</table>
<script id="table_tree.html" type="text/ng-template">
<tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
<td class="cell-name" ng-if="level && level > 1">
<span style="padding-left: 30px" > <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}} </span>
</td>
<td class="cell-name top-border" ng-if=" (!level && level <= 1 ) || (level && level <= 1)">
<span style="padding-left:11px" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-name top-border" ng-if="!level">
<span class="indent" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-members top-border">
{{item.Version}}
</td>
<td>
{{item.Size}}
</td>
</tr>
<tr class="children" ng-if="item.children && item.children.length > 0">
<td colspan="3">
<table>
<tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
</table>
</td>
</tr>
</script>
</div>
</body>
</html>
Check out this directive, after trying several of them, I've found that this one is quite flexible, and I've used it successfully in one of my projects:
Angular Drag and Drop
I have downloaded the zip of this plunkr (http://plnkr.co/edit/ISa4xg?p=preview) on my computer. When I run the example the table shows but css style is not applied (for example, pagination is in an ugly way). Anyone knows why do I have this problem?
Thanks in advance.
just simple example to show data into table
// Try like this ............
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<th data-ng-click="doSort('name')">Name</th>
<th data-ng-click="doSort('city')">City</th>
<th data-ng-click="doSort('Money')">Money</th>
</tr>
<tr data-ng-repeat="person in customer | orderBy:sortBy:reverse | filter:nameText |filter:nameOnly |filter:cityOnly |filter:MoneyOnly">
<td> {{ person.name }} </td>
<td> {{ person.city}} </td>
<td> {{ person.Money}} </td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sortBy= 'name';
$scope.reverse= false;
$scope.customer= [{name:'Rasel',city:'Dhaka',Money:'10'},
{name:'Jon',city:'Khulna',Money:'20'},
{name:'Mr. Fox',city:'Rajshahi',Money:'30'},
{name:'Nabil',city:'Comilla',Money:'40'}];
});
</script>
</body>
</html>