I am writing a basic angular routing code ,in which if user clicks on show details the corresponding order id will be displayed.I am getting the error.Where am i going wrong ? I have added a sample HTML file.
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td>show details</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
You need the ngRoute module
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js
After you have this script in your html add it as a dependency
var sample=angular.module("sample",['ngRoute']);
Related
here's the content of my file app.js:
var app=angular.module("Doc",[]);
app.controller("DocController",function($scope,$http){
$scope.documents=[];
$http.get("/all")
.success(function(data){
$scope.documents=data;
});
});
and my page index.html:
<body ng-app="Doc" ng-controller="DocController">
<table>
<thead>
<tr>
<th>REF</th><th>NAME</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="k in documents">
<td>{{k.dref}}</td>
<td>{{k.dname}}</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
But when I run my app I don't get the list, It only displays this heads:
REf NAME
like in my html page:
<th>REF</th><th>NAME</th>
Following is a simple code which I wrote casually for fetching the values in a table through ng-repeat, however, ng-repeat is filling in the values in different rows. for eg: 1st element: 1st row; second element: second row.
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Test</title>
<script type="text/javascript" src="D:\hTML\library\angular.min.js"></script>
<script type="text/javascript" src=D:\hTML\jsemployee.js></script>
</head>
<body ng-controller= "ctrl">
<h1> Table is Table</h1>
<table border="1">
<thead>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="employee in employees| filter:searchText:exactmatch">
<tr >
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.city}}</td>
<td>{{employee.country}}</td>
</table>
</body>
AngularJS:
angular.module('app', []).controller('ctrl', function($scope){
$scope.employees=[{name: "Gerald"},{gender:"male"}, {city:"Colorado"}, {country:"USA"}]
})
Output:
Please let me know what am I doing wrong.
The problem is with your employees array, you are having each field as a object.Instead, it should be like this,
$scope.employees=[{name: "Gerald",gender:"male", city:"Colorado", country:"USA"}];
DEMO
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.employees=[{name: "Gerald",gender:"male", city:"Colorado", country:"USA"}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>
<body ng-controller="ctrl">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="employee in employees| filter:searchText:exactmatch">
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.city}}</td>
<td>{{employee.country}}</td>
</tr>
</table>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
</body>
</html>
Please use Below code
$scope.employees=[{name: "Gerald",gender:"male",city:"Colorado",country:"USA"}]
You are defined a variable of having values with different indexes so while using ng-repeat , it is taking values with different indexes.that's why you are not getting in single row.
You have to create single element in an array so that it will iterate only once and create a row only once instead of repeat 4 times.
Try this :
$scope.employees=[{"name":"Gerald", "gender":"male", "city":"Colorado", "country":"USA"}];
instead of
$scope.employees=[{name: "Gerald"},{gender:"male"}, {city:"Colorado"}, {country:"USA"}]
change your json format and check as below code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
<table border="1">
<thead>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="employee in employees| filter:searchText:exactmatch">
<tr>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.city}}</td>
<td>{{employee.country}}</td>
</table>
</div>
<script>
angular.module('app', []).controller('ctrl', function ($scope) {
$scope.employees = [{ name: "Gerald", gender: "male", city: "Colorado", country: "USA" }]
})
</script>
</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 work why?
this is html
ng-repeat doesn't work . I can't understand what's wrong with it . I checked everything but it still the same thing and it looks like this post is mostly code so i need to add more words to here to share this with you guys.I think this information is sufficient
<!doctype html>
<html ng-app="telebe">
<head>
<meta charset="utf-8">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet" />
<title>AngularJS Practice</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div>
<div ng-controller="BodyController as bc">
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr ng-repeat="telebe in telebeler" >
<td>
{{telebe.ad}}
</td>
<td>
{{telebe.soyad}}
</td>
<td>
{{telebe.age}}
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
this is app.js
app = angular.module("telebe",[ ]);
app.controller("BodyController",function(){
this.telebeler = [{ad:'Murad',soyad:"Ramazanli",qrup:'b',id:5,age:22},{ad:'Sultan',soyad:"Esgerov",qrup:'a',id:2,age:14},{ad:'Nazim',soyad:"Memmedov",qrup:'c',id:1,age:23},{ad:'Leyla',soyad:"Semedova",qrup:'b',id:3,age:24}];
});
try changing telebeler to bc.telebeler:
<tr ng-repeat="telebe in bc.telebeler track by $index" >
<td>
{{telebe.ad}}
</td>
<td>
{{telebe.soyad}}
</td>
<td>
{{telebe.age}}
</td>
</tr>
See this plunker, its working.
simply add a track by $index in your ng-repeat refer to the update above.
See this error reference to understand it more
you forgot passing $scope parameter. Replace this with $scope while assigning telebeler value
app.controller("BodyController",function($scope){
$scope.telebeler = [{ad:'Murad',soyad:"Ramazanli",qrup:'b',id:5,age:22},{ad:'Sultan',soyad:"Esgerov",qrup:'a',id:2,age:14},{ad:'Nazim',soyad:"Memmedov",qrup:'c',id:1,age:23},{ad:'Leyla',soyad:"Semedova",qrup:'b',id:3,age:24}];
});
At first i get the data in the begining but after posting some new students i want the array to update and it updates but table doesn't and i dont know why .It suppose to be like this or what?
This is the html
<!DOCTYPE html>
<html lang="en" ng-app="ang">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
<title>Angular Practice </title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<style>
div{
overflow:auto;
margin:5px;
}
</style>
</head>
<body ng-controller="TableController as bc">
<div style="margin:5px auto;width:810px">
<div style="width:250px;float:left;">
<form name="forma" novalidate ng-submit="forma.$valid&&bc.sendmes()">
<table class="table table-responsive table-hover">
<tr>
<th colspan="2">Add a new Student</th>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="bc.telebe.name" class="input-sm" required /></td>
</tr>
<tr>
<td>Surname</td>
<td><input type="text" ng-model="bc.telebe.surname" class="input-sm" required /></td>
</tr>
<tr>
<td>Age</td>
<td><input type="number" ng-model="bc.telebe.age" class="input-sm" required /></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="Submit" class="btn-sm" /></th>
</tr>
</table>
</form>
</div>
<div style="width:550px;">
<table ng-controller="TableController as bc" class="table table-responsive table-striped table-bordered table-hover">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr ng-repeat="telebe in bc.telebeler">
<td>{{telebe.name}}</td>
<td>{{telebe.surname}}</td>
<td>{{telebe.age}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
This is app.js
app=angular.module("ang",[ ]);
app.controller("TableController",function($http){
var bu = this;
this.telebe = {}
bu.telebeler = [ ];
$http.get("getjson.php").success(function(data){
bu.telebeler = data;
});
this.sendmes=function(){
$http.post("getjson.php",this.telebe).success(function(data){
bu.telebeler = data;
console.log(bu.telebeler);
bu.telebe = {};
});
};
});
This is the getjson.php and this file is clear no problem with php
<?php
require("config.php");
header("Content-type:text/json");
if($s = file_get_contents("php://input")){
$ar=json_decode($s,true);
$name = htmlspecialchars($ar['name']);
$surname = htmlspecialchars($ar['surname']);
$age = htmlspecialchars($ar['age']);
mysql_query("INSERT INTO telebe(name,surname,age) VALUES('$name','$surname','$age')");
};
$tema = mysql_query("SELECT * FROM telebe");
$array = array();
while($sira = mysql_fetch_assoc($tema))$array[]=$sira;
echo json_encode($array);
?>
Remove ng-controller="TableController as bc" directive from the table tag. The controller is already defined in body.
Currently, you have two controllers with different scopes, each of them sending its own HTTP request to get the initial data. When you are changing the data, only the outer controller is updated but you are reading them from the inner controller. Removing the inner controller will fix the problem.
You should insert $scope to your controller and define objects for view on the scope rather then on the controller:
app.controller("TableController",function($scope, $http){
$scope.telebe = {};
$scope.telebeler = [];
...
}
and then in html you should point to the scope like this:
<tr ng-repeat="t in telebeler">
That should make it work.