We Keep Coding

AngularJS $http - slow

Im using AngularJS on front-end and PHP on back-end that is hosted in Google App Engine. Now when i try to fetch JSONP data directly from server it goes fast, when i use a Google service the time increases with almost 1s. Very short: Im getting my data very slow, it takes 1.3-1.8s to render data on screen.
This is my Client-code-Controller:
angular
.module('RDash')
.controller('tables-ctrl5', ['$scope','$http', function($scope,$http) {
$http({
method: 'jsonp',
url: 'https://gtmdocx.appspot.com/test5?callback=JSON_CALLBACK',
headers: {"Content-Type":"application/json"}
}).then(function ListCtrlresponses(response) {
$scope.GTMWorkspacesTags = response.data.tag;
console.log(response.data.tag);
$scope.GTMWorkspacesTagsLength = response.data.tag.length;
}, function Error(response) {
$scope.users = response.statusText;
});
}])
im using ng-repeat:
<div class="col-lg-6">
<rd-widget>
<rd-widget-header icon="fa-tasks" title="Google Tag Manager - URL: http://gtmdocx.appspot.com/test3 (LISTE AV TAGS I WORKSPACE) = Hent ut PATH fra LISTE av Workspace (EX: accounts/1746756959/containers/7454209/workspaces/8)">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<div class="table-responsive">
<table class="table table-striped" ng-controller="tables-ctrl5">
<thead>
<tr>
<th>AccountID</th>
<th>ContainerID</th>
<th>TagName</th>
<th>Path</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="workspace in GTMWorkspacesTags">
<td>{{ workspace.accountId }}</td>
<td>{{ workspace.containerId }}</td>
<td>{{ workspace.name }}</td>
<td>{{ workspace.path }}</td>
<td>{{GTMWorkspacesTagstest}}</td>
</tr>
</tbody>
</table>
</div>
</rd-widget-body>
<rd-widget-footer>
Footer
</rd-widget-footer>
</rd-widget>
</div>
Now this is my PHP-code: very simple and straight forward: (PS: using slim)
// 4) Gets all TAGS related to this WORKSPACE
$app->get('/test5', function (Request $request, Response $response) {
$client = new Google_Client();
$client->setApplicationName("gtmdocx");
$client->setAuthConfig('service_account.json');
$client->setScopes(['https://www.googleapis.com/auth/tagmanager.readonly',
'https://www.googleapis.com/auth/tagmanager.manage.accounts',
'https://www.googleapis.com/auth/tagmanager.edit.containers',
'https://www.googleapis.com/auth/tagmanager.publish'
]);
$service = new Google_Service_TagManager($client);
$containers = $service->accounts_containers_workspaces_tags->listAccountsContainersWorkspacesTags('accounts/1746756959/containers/7454209/workspaces/8');
echo $_GET['callback'] . '('.json_encode($containers).')';
});
If you look at the timing on response:
I hope someone has experienced this before. This is really bothering me that it is using so much time to render. When i type in directly the URL in browser i get response right away, but in angularjs as front its slow. Im using JSONP to fetch because of CORS, can this be the problem?

Update Individual MySQL Records on Checkbox Click with AngularJS

I am creating a golf tournament check-in app and want to be able to update an individual record in the MySQL database when a checkbox is clicked. So, when someone checks in they click the checkbox by their name and I want it to then update the database record of that person (the checked in column set to 1 for the specific id of the person) so that others can see that the person is checked in almost immediately.
I am not sure how to get both the id and the checkedin value to update only the affected record when a checkbox is clicked.
app.js
var checkinApp = angular.module('checkinApp', []);
checkinApp.controller('checkinController', function($scope, $http, $location, $anchorScroll) {
$http.get('lib/api.php').success(function(data) {
$scope.checkindata = data;
});
$scope.processForm = function(checkedindata) {
$http.post('lib/process.php', { gid : checkedindata.gid, checkedin : checkedindata.checkedin })
.then(function(data) {
console.log(data);
})
};
});
HTML/Output
<table class="table table-striped table-responsive">
<tbody>
<tr>
<th>Checked In</th>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Starting Hole</th>
</tr>
<tr ng-repeat="item in checkindata">
<td><input type="checkbox" name="checkedin" ng-model='checkedin' ng-change='processForm(checkedindata)' ng-checked="item.checkedin == 1"/></td>
<td>{{item.fname}}</td>
<td>{{item.lname}}</td>
<td>{{item.cname}}</td>
<td>{{item.hole}}</td>
</tr>
</tbody>
</table>
process.php
<?php
require_once('../includes/cred.php');
$checkedin = $_POST['checkedin'];
$sth = $dbh->prepare("UPDATE golfers SET checkedin=$checkedin");
$sth->execute();
DB Table
DB Table
Output
Output

Simply replace ng-change='processForm(checkedindata)'
by ng-change='processForm(item)'
and in your PHP code do something like :
$sth = $dbh->prepare("UPDATE golfers SET checkedin=$checkedin->checkedin WHERE gid=$checkedin->gid");

Angularjs checkbox like gmail

Im newbie in angularjs.
Now im having issues with a checkbox.
First: my web are paging , sorting and change page size by call api to get data from server in factory:
this.getData = function(page , sortColumm, sortType , pageSize, searchText){
$http({
method = get;
url = "api/data?page="+page +"&sortColumm=" +sortColumm +"&sortType="+sortType +"&pagesize="+pageSize+"&search="+searchText;
}).success(function (data) {
}).error(function (error) {
});
}
now i have a page using angularjs to bind data using funciton getData.
html:
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"></th>
<th>Administrator Name</th>
<th >Administrator Type</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="gladmin in gladmins" ng-switch on="gladmin.isEnabled"
on-finish-render="resizetable">
<td><input type="checkbox" ng-model="gladmin.Selected" value="{{gladmin.id}}" ng-click="selectionAdmin(gladmin.id)"></td>
<td>{{gladmin.name}}</td>
<td>{{gladmin.type}}</td>
</tr>
</tbody>
controller
app.controller('adminPage',function(){
// call getData
$scope.checkAll=function(){
// what should i write here?
// i want check all is for current page, next page checkall = fall,
// same GMAIL
}
$scope.selectionAdmin = function(id){
// what should i do here
}
})
All i want is the checkall same the checkall in gmail ? anyone help me ? please, i am new bie in this!
i find some link here : http://plnkr.co/edit/N98IKTcHoZMCs18FjSRF?p=preview
http://vitalets.github.io/checklist-model/
but it work not same i want !

It is hard for me to understand the question but I think you just want a property of ng-checked="isAllChecked" in your ng-repeat for the inputs. When that value is set to true all of them should check.

AngularJs. Problems with ng-repeat

I'm having two tables witch renders data trough angularJs, coming from 2 c#-methods.
The tables are structured almost exactly the same. The first one below is used as I searchfield and the other one is used basiclly to render names.
My problem is that the first one works perfect, but the other one does not. And I don't see the problem. Any help would be appreciated. // Thanks!
Here are my two tables. (the first one is working)
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
<div ng-app="searchApp">
<div ng-controller="searchController">
#*first table works*#
<span style="color: white">Search:</span> <input data-ng-click="myFunction()" ng-model="searchText">
<table style="color: white" id="searchTextResults">
<tr><th>Name</th></tr>
<tr ng-show="!!searchText.length != 0" ng-repeat="friend in friends | filter:searchText">
<td data-id="{{friend.id}}" data-ng-click="SendFriendRequest(friend.id)">{{friend.id.replace("RavenUsers/","")}}</td>
</tr>
</table>
#*Does not work*#
<input type="button" value="Get friends requests" data-ng-click="GetFriendRequests()">
<table style="color: white">
<tr><th>Friend requests</th></tr>
<tr ng-repeat="friendRequest in friendRequests">
<td data-id="{{friendRequest.UserWhoWantsToAddYou}}" data-ng-click="acceptUserRequest(friendRequest.UserWhoWantsToAddYou)">{{friendRequest.UserWhoWantsToAddYou}}</td>
</tr>
</table>
</div>
</div>
HERE IS MY SCRIPT
<script>
var App = angular.module('searchApp', []);
App.controller('searchController', function ($scope, $http) {
//Get all users to the seachFunction
$scope.myFunction = function () {
var result = $http.get("/Home/GetAllUsersExeptCurrentUser");
result.success(function (data) {
$scope.friends = data;
});
};
//Get friendRequests from other users
$scope.GetFriendRequests = function () {
var result = $http.get("/Home/GetFriendRequests");
result.success(function (data) {
$scope.friendRequests = data;
});
};
});
</script>
The first script-function called myFunction works perfect and the data coming from my c#-method looks like this:
[{"id":"RavenUsers/One"},{"id":"RavenUsers/Two"},{"id":"RavenUsers/Three"}]
The second script-function called GetFriendRequests does not work, and as far as I can see there is no difference between this data passed into here than the data passed into myFunction:
[{"userWhoWantsToAddYou":"RavenUsers/Ten"},{"userWhoWantsToAddYou":"RavenUsers/Eleven"}]

I'd suggest you use then instead of success because $http returns a promise.
If your table doesn't "render" then put a breakpoint inside success function, console.log() the data or check friendRequests inside your HTML template, e.g. using <div>{{ friendRequests | json }}</div>, to ensure you actually got data from response.
Now you do not handle exceptions at all.
Example:
result.then(function(data) {
console.log('got data')
},function(error) {
console.log('oh noes :( !');
});
Related plunker here http://plnkr.co/edit/KzY8A3

It would be helpful if you either (a) provided a plunker to your code or (b) provided the error message.
ng-repeat requires a uniquificator on each item in the repeat, which defaults to item.id. If you don't have an id field on the item, you'll need to tell angular what field to use.
https://docs.angularjs.org/api/ng/directive/ngRepeat
So I'd suggest changing
<tr ng-repeat="friendRequest in friendRequests">
to
<tr ng-repeat="friendRequest in friendRequests track by userWhoWantsToAddYou">
and see if that works.

Knockout JS Binding and Filter Data

I have the following Problem
I have this Code to load Json Data from a external Web api
and Show it in my site this works..
but my Problem is
I must FILTER the Data with a Dropdown List
When i select the Value "Show all Data" all my Data must be Show
and when i select the Value "KV" in the Dropdown only the Data
with the Text "KV" in the Object Arbeitsort must Show..
How can i integrate a Filter in my Code to Filter my Data over a Dropdown ?
and the next is how can i when i insert on each Item where in HTML Rendered a Button
to Show Details of this Item SHOWS his Detail Data ?
when i click Details in a Item i must open a Box and in this Box i must Show all Detail Data
of this specific Item ?
$(document).ready(function () {
function StellenangeboteViewModel() {
var self = this;
self.stellenangebote = ko.observableArray([]);
self.Kat = ko.observable('KV');
$.getJSON('http://api.domain.comn/api/Stellenangebot/', function (data) {
ko.mapping.fromJS(data, {}, self.stellenangebote);
});
}
ko.applyBindings(new StellenangeboteViewModel());
});

I'll give this a go, but there's quite a few unknowns here. My suggestions are as follows:
First, create a computed for your results and bind to that instead of self.stellenangebote
self.stellenangeboteFiltered = ko.computed(function () {
// Check the filter value - if no filter return all data
if (self.Kat() == 'show all data') {
return self.stellenangebote();
}
// otherwise we're filtering
return ko.utils.arrayFilter(self.stellenangebote(), function (item) {
// filter the data for values that contain the filter term
return item.Arbeitsort() == self.Kat();
});
});
With regards the detail link, I'm assuming you are doing a foreach over your data in self.stellenangeboteFiltered(), so add a column to hold a link to show more details:
<table style="width:300px">
<thead>
<tr>
<th>Id</th>
<th>Arbeitsort</th>
<th>Details</th>
</tr>
</thead>
<tbody data-bind="foreach: stellenangeboteFiltered">
<tr>
<td><span data-bind="text: Id"> </span></td>
<td><span data-bind="text: Arbeitsort"> </span></td>
<td>Detail</td>
</tr>
</tbody>
</table>
Add a control to show details:
<div data-bind="visible: detailVisible, with: selectedItem">
<span data-bind="text: Position"> </span>
<span data-bind="text: Arbeitsort"> </span>
</div>
In your JS add a function:
// add some observables to track visibility of detail control and selected item
self.detailVisible = ko.observable(false);
self.selectedItem = ko.observable();
// function takes current row
self.showDetail= function(item){
self.detailVisible(true);
self.selectedItem(item);
};
UPDATE
Here's an updated fiddle: JSFiddle Demo