Trying to learn AngularJS and a hole bunch of frameworks at the same time (doomed to go wrong).
I got this far, but have some issues with the bootstrap not working..
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title>Learning firebase and angularJS</title>
<script data-require="moment.js#*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script data-require="chance#*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body style="margin:20px" ng-controller="employeeCtrl">
<div class="">
<button class="btn btn-default" ng-click="saveEmployee()">
Save
<span class="glyphicon glyphicons-ok"></span>
</button>
</div>
<div class="">
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody ng-repeat="employee in employees" ng-class-odd="oddRow">
<tr>
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function employeeCtrl($scope) {
refresh = function() {
$scope.employeeName = new Chance().name();
$scope.employeeAge = new Chance().age();
}
$scope.employees = {};
refresh();
$scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");
$scope.saveEmployee = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
$scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
refresh();
};
$scope.myData.on('value', function(snapshot){
$scope.employees = snapshot.val();
$scope.$apply(); // temp. solution
});
};
</script>
<script>
var datetime = null, date = null;
moment.locale('da');
var update = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
datetime.html(dateStr);
};
$(document).ready(function() {
datetime = $('#datetime')
update();
setInterval(update, 1000);
});
</script>
</body>
</html>
http://plnkr.co/edit/MA52T3?p=preview
Now there should appear a striped table and a glyphicon at the save button.. But there is not.. Any help would be appreciated.
Bonus angular table row questions
I first tried to make the input part of the first row and the do a angular for-loop, but somehow this doesn't work..
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title>Learning firebase and angularJS</title>
<script data-require="moment.js#*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script data-require="chance#*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body style="margin:20px" ng-controller="employeeCtrl">
<div class="">
<button class="btn btn-default" ng-click="saveEmployee()">
Save
<span class="glyphicon glyphicons-ok"></span>
</button>
</div>
<div class="">
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
<span ng-repeat="employee in employees">
<tr>
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</span>
</tbody>
</table>
</div>
<script>
function employeeCtrl($scope) {
refresh = function() {
$scope.employeeName = new Chance().name();
$scope.employeeAge = new Chance().age();
}
$scope.employees = {};
refresh();
$scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");
$scope.saveEmployee = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
$scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
refresh();
};
$scope.myData.on('value', function(snapshot){
$scope.employees = snapshot.val();
$scope.$apply(); // temp. solution
});
};
</script>
<script>
var datetime = null, date = null;
moment.locale('da');
var update = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
datetime.html(dateStr);
};
$(document).ready(function() {
datetime = $('#datetime')
update();
setInterval(update, 1000);
});
</script>
</body>
</html>
http://plnkr.co/edit/x6fSbG?p=info
There is a typo in the bootstrap-part. Change it to:
<span class="glyphicon glyphicon-ok"></span>
Bonus-question: Simply remove the wrapping <span>:
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
<tr ng-repeat="employee in employees" >
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</tbody>
The glyphicons-ok doesn't exist in your stylesheets, use glyphicon-ok instead.
For your striped table, you're generating all oddRows, shouldn't they be alternating with evenRows...
About button u have mistake there. Change:
<span class="glyphicon glyphicon-ok"></span>
About include angular. This example structure will work:
<!doctype html>
<html ng-app='project'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<base href="/">
</head>
<body>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controllers/main_controller.js" type="text/javascript"></script>
</body>
</html>
Related
Here I want to show Name, Country values through $http, The data is showing in the table this is fine, but when I check any check box in that table I want to display Name, Country values of that selected checkbox. How can I do that?
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(indexVal, values) {
var getDataValue = {};
if (values) {
alert($scope.myData.records.Name[indexVal]);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails($index, chkVal)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
i want to show Name and Contry for selected Checkbox only
</div>
</div>
Check this out, it works:
(Code explained below).
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$scope.getDataValue = [];
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(data) {
if ($.inArray(data, $scope.getDataValue) === -1) {
$scope.getDataValue.push(data);
} else {
var index = $scope.getDataValue.indexOf(data)
$scope.getDataValue.splice(index, 1);
}
console.log($scope.getDataValue);
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails(x)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
<b>Selected Name and Country</b>
<div ng-repeat="x in getDataValue">
{{x.Name}} - {{x.Country}}
</div>
</div>
Explanation
Function showDetails(x) gets triggered on check/uncheck of the check box.
Parameter x is an object in the array you pressed at that instance.
Then, it checks whether the object (i.e, data) is present in the array (i.e, $scope.getDataValue) or not. if ($.inArray(data, $scope.getDataValue) === -1)
If it is absent, it just pushes the object in the array and shows the array.
Else, it deletes the object which is unchecked and shows the remaining array.
here is my index.html and safeCtrl.js controller. I am trying to using angularJS to implement the angular smart table :[http://lorenzofox3.github.io/smart-table-website/][1] .
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular.js"></script>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="smart-table.debug.js"></script>
<script src="lrInfiniteScrollPlugin.js"></script>
<div ng-controller="safecCtrl">
<button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add random item
</button>
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate}}</td>
<td>{{row.balance}}</td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
app.controller('safeCtrl', ['$scope', function ($scope) {
var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
var id = 1;
function generateRandomItem(id) {
var firstname = firstnames[Math.floor(Math.random() * 3)];
var lastname = lastnames[Math.floor(Math.random() * 3)];
var birthdate = dates[Math.floor(Math.random() * 3)];
var balance = Math.floor(Math.random() * 2000);
return {
id: id,
firstName: firstname,
lastName: lastname,
birthDate: new Date(birthdate),
balance: balance
}
}
$scope.rowCollection = [];
for (id; id < 5; id++) {
$scope.rowCollection.push(generateRandomItem(id));
}
//add to the real data holder
$scope.addRandomItem = function addRandomItem() {
$scope.rowCollection.push(generateRandomItem(id));
id++;
};
//remove to the real data holder
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
}]);
I was using visual studio 2017. Right now the page is weird because the data is not binding. Can anyone help me with this? I am really confusing...Thanks.
You're repeating over the wrong collection. It should be rowCollection and not displayedCollection.
Since I am new to AngularJS I have come across an issue when it comes to presenting my database data which has been mapped using Rest and manipulated using JPA. So it is as ready as it can be. No need for further manipulation. Now using the $http.get I have been able to present the first table just calling the url but when it comes to getting data presented from a different table by sending a parameter something doens't work out.
In the module.js it looks like this
(function () {
'use strict';
angular.module('app',[]);
})();
The controller.js like this:
(function () {
'use strict';
angular
.module('app')
.controller('MyController', MyController);
MyController.$inject = ['$http'];
function MyController($http) {
var vm = this;
vm.players = [];
vm.historia = [];
vm.getAll = getAll;
vm.getHistory = getHistory;
init();
function init(){
getAll();
getHistory(name);
}
function getAll(){
var url = "/all/players";
var playersPromise = $http.get(url);
playersPromise.then(function(response){
vm.players = response.data;
});
}
function getHistory(name){
var url = "/all/allplayergames/" + name;
var historiaPromise = $http.get(url);
console.log([url]);
historiaPromise.then(function(response){
vm.historia = response.data;
console.log([response.data]);
});
}
}
})();
and last but not least html
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link th:if="${mode=='development'}" rel="stylesheet" href="../static/bootstrap.css" th:href="#{/bootstrap.css}"/>
<link th:if="${mode=='production'}" rel="stylesheet" href="../static/bootstrap.min.css" th:href="#{/bootstrap.min.css}"/>
<script type="text/javascript" src="/static/angular.min.js" th:src="#{/angular.min.js}" ></script>
<script type="text/javascript" src="/static/app/app.module.js" th:src="#{/app/app.module.js}" ></script>
<script type="text/javascript" src="/static/app/yatzy.controller.js" th:src="#{/app/yatzy.controller.js}" ></script>
</head>
<body ng-app="app" >
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Game Results</a>
</div>
</div>
</nav>
</header>
<div>
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div ng-controller="MyController as vm">
<div class="btn-group" role="group">
<button ng-click="vm.getAll()" type="button" class="btn btn-default">Player Game History</button>
</div>
<table class="table">
<thead>
<tr>
<th>PlayerID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in vm.players">
<td> {{player.playerid}}</td>
<td> {{player.name}}</td>
<td>
<button class="btn btn-danger" ng-click="vm.getHistory(player.name);
">View History</button>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Score</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in vm.historia">
<td> {{p.score}}</td>
<td> {{p.player.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer" style="position: absolute; bottom: 0;background-color: #f5f5f5;" >
<div class="container">
<p th:text="${#dates.format(datetime,'dd MMM yyyy HH:mm')}" class="text-muted">Todays date: </p>
</div>
</footer>
</body>
</html>
And the console log does show the right player url when the "View History" is clicked, but it doesnt get the data from the table that is the score or the name.
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
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.