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.
Related
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 want to use filter function and input search at the same time by using AngularJS. I can able to do with multiple functions. But I'm getting some errors while I add an textbox for search. Is there any way to do this? I tried some ways but no one did not work.
Thanks in advance.
Example code is below
var app = angular.module("app", []),
url = "http://www.filltext.com/?rows=50&pretty=true&fName={firstName}&age=[18,19,20,21]";
app.controller("controller", function($scope, $http) {
$http.get(url)
.success(function(resp) {
$scope.list = resp;
});
$scope.filterAge = function(item) {
return item.age > 19;
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Filter</title>
</head>
<body ng-controller="controller">
<div class="container">
<br>
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: filterAge">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should add custom filter to angular module instead adding filter function to your controller. This is the example:
CustomFilter:
.filter('filterByAge', function filterByAge() {
return function(array, age) {
var filteredArray = [];
angular.forEach(array, function(item) {
if (item.age > age) {
filteredArray.push(item);
}
});
return filteredArray;
}
});
HTML
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: search | filterByAge:19">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
$scope.$watch('search', function (data) {
//sorting logic
})
Watcher is waiting for any action taken on search filed then the function is executed.
I am getting the data from database via http post call and rendering the table. Well the implementation code looks fine however, the pagination doesn't seem to work.
I implemented it according to my requirement and I get the response which I can see in chrome console. What could be wrong with the pagination as I am not able to see any pagination buttons.
Here's the code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/module.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" />
<script>
//Get table from Server and do pagination
app.controller("tableController", function ($scope, $http) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 10
, $scope.maxSize = 5;
$scope.getTable = function () {
$scope.customerTable = [];
$http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data)
{
$scope.customerTable = data;
});
};
$scope.getTable();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.customerTable.slice(begin, end);
});
});
</script>
</head>
<body>
<div class="container" id="main"><br/><br/>
Search: <input type="text" ng-model="search" placeholder="Search">
<div ng-controller="tableController">
<table class="table table-striped table-hover table-bordered">
<tr>
<th style="font-size: 13.3px">Card number</th>
<th style="font-size: 13.3px">First name</th>
<th style="font-size: 13.3px">Opening balance</th>
<th style="font-size: 13.3px">Withdrawal</th>
<th style="font-size: 13.3px">Deposit</th>
<th style="font-size: 13.3px">Closing balance</th>
<th style="font-size: 13.3px">Tx date</th>
<th style="font-size: 13.3px">Usage type</th>
</tr>
<tr ng-repeat="data in customerTable| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
</table>
<pagination
ng-model="currentPage"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<br/><br/><br>
</form>
</div>
</div>
</body>
</html>
Here's the plunker: http://plnkr.co/edit/eNgT4bVroGIla4EOdkNZ?p=preview
Module:
var app = angular.module('myApp', ['ui.bootstrap']);
Try this,
<tr ng-repeat="data in filteredTodos| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
You should be iterating filteredTodos instead of customerTable
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']);