I am trying to show angular Post data whenever a tab is clicked using ng-click event.
But it's not working.
What am i doing wrong here?.
First part of code works fine for switching Tabs, But i also want to show dynamic response when any tab is clicked & use it's tabNum as ?id=tabNum in ajax POST
angular.module('tabApp', [])
.controller('TabController', ['$scope', function($scope, $http) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}]);
I HAVE PROBLEM WITH FOLLOWING CODE, WHERE SHOULD I PLACE IT ?
$http.get('http://localhost:8080/welcome.html?id=$tabNum')
.success(function(data, status, headers, config) {
$scope.tab = data;
})
.error(function(data, status, headers, config) {
// log error
}); }]);
this is my HTML page
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>MY
Reports
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" ng-app="tabApp">
<div class="row" ng-controller="TabController">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active: isSet(1) }">
<a href ng-click="setTab(1)">SHOW Manual Admins</a>
</li>
<li ng-class="{ active: isSet(2) }">
<a href ng-click="setTab(2)">SHOW ONE Admins</a>
</li>
<li ng-class="{ active: isSet(3) }">
<a href ng-click="setTab(3)">SHOW TWO Read Admins</a>
</li>
<li ng-class="{ active: isSet(4) }">
<a href ng-click="setTab(4)">SHOW THREE Admins</a>
</li>
<li ng-class="{ active: isSet(5) }">
<a href ng-click="setTab(5)">SHOW FOUR Read Admins</a>
</li>
<li ng-class="{ active: isSet(6) }">
<a href ng-click="setTab(6)">SHOW FIVE Read Admins</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="jumbotron">
<div ng-show="isSet(1)">
<h1>CONTENT1</h1>
</div>
<div ng-show="isSet(2)">
<h1>CONTENT2</h1>
</div>
<div ng-show="isSet(3)">
<h1>CONTENT3</h1>
</div>
<div ng-show="isSet(4)">
<h1>CONTENT4</h1>
</div>
<div ng-show="isSet(5)">
<h1>CONTENT5</h1>
</div>
<div ng-show="isSet(6)">
<h1>CONTENT6</h1>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js'></script>
<script src="app.js"></script>
</body>
</html>
Hey as mentioned in my comment you can use a service for your http calls
.service('HttpService', ['$rootScope', '$http', 'Ls', 'CommonService', 'DateService', function ($rootScope, $http, Ls, CommonService, DateService) {
return {
CallService: function (url, callback) {
$http.get(url)
.success(function (data, status) {
callback(data, status);
}).error(function (data, status) {
callback(data, status);
});
}
}
});
Which can be called from the controller (dont forget to inject HttpService)
.controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
$scope.tabdata = data;
});
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
the whole would look like this
angular.module('tabApp', [])
.controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
$scope.tabdata = data;
});
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}])
.service('HttpService', ['$rootScope', '$http', function ($rootScope, $http) {
return {
CallService: function (url, callback) {
$http.get(url)
.success(function (data, status) {
callback(data, status);
}).error(function (data, status) {
callback(data, status);
});
}
}
});
Mh maybe the get call maybe console log status and response
Related
I want to display the clicked row button details info in next view,I am displayin only code,nom in first page and remaining fields will view after clicking button.
I used the option "filter" to do it, but sometimes it returns details of non concerned code , like for the two codes: 45 and 453 , it gaves the same detail because of the common number '45'.
First html page:
<div class="row header">
<div class="col" >Code</div>
<div class="col">Client</div>
</div>
<div class="row" ng-repeat="x in namesC">
<div class="coll">
<a class="button" href="#/detail/{{x.Code}}">
{{x.Code}}</a>
</div>
<div class="col"> {{x.NomClient}} </div>
</div>
second html page (detail.html):
<ion-list ng-repeat="x in namesC| filter: {Code: thisX}|limitTo:1">
<ion-item>
<div class="item item-divider center-text"> {{x.Code}}</div>
</ion-item>
<ion-item>
<b>adresse</b> <span class="item-note"> {{x.adresse}} </span>
</ion-item>
</ion-list>
app.js :
$stateProvider.state('detailColis', {
url: '/detail/:Code',
templateUrl: 'templates/detail.html',
controller: 'SuiviAdminCtrl'
});
You must add Config file Or add the down code in html file to solve this problem
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/detail/:Id", {
templateUrl : "detail.htm"
})
});
</script>
I tested the above code, its working.
We can use $routeParams, Also we can use service. See basic example and try like below.
var app = angular.module('exApp',['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
template:'<p>All Datas View</p><p ng-repeat="data in datas">{{data.name}} <button ng-click="setData(data)">View</button> routeParams.. <button ng-click="setrouteData($index)">Index</button></p>',
controller: 'ctrl',
})
.when('/detail',{template:'<p>Particular Data View</p><button ng-click="back()">Back</button><br><p>{{data}}</p>',controller: 'ctrlOne'})
.when('/detail/:id',{template:'<p>Data View</p><button ng-click="back()">Back</button><br><p>{{data}}</p>',
controller: 'ctrltwo'})
.otherwise({redirectTo:'/'});
}]);
app.controller('ctrl', function($scope,$location,exService){
$scope.datas = exService.data;
$scope.setData = function(data){
//console.log(data);
exService.Obj = data;
$location.path('detail');
}
$scope.setrouteData = function(index){
$location.path('detail/'+ index);
}
});
app.controller('ctrlOne', function($scope,$location, exService){
var data = exService.Obj;
$scope.data=data;
$scope.back = function(){
$location.path('/');
}
});
app.controller('ctrltwo', function($scope,$location, $routeParams,exService){
var data = $routeParams.id;
$scope.datas = exService.data;
$scope.data=$scope.datas[data];
$scope.back = function(){
$location.path('/');
}
});
app.service('exService', function(){
var Obj = {};
var data = [{"id":1, "name":"xxx"},{"id":2, "name":"yyy"},{"id":3, "name":"zzz"}];
return { Obj, data};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<body ng-app="exApp">
<p>Sample</p>
<div ng-view></div>
</body>
this is the solution, Thanks to Sudarshan_SMD
The solution is just to change filter: with :
filter: {CodeEnvoiColis: thisX}:true
I'm implementing AngularJS with Laravel and having some issues. My codes:
Route:
Route::get('/', function () {
return view('angular');
});
Route::get('/test', function () {
return User::all();
});
HTML/JS (test.blade.php):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="userCtrl">
<ul>
<li ng-repeat="x in user">
#{{ x.email + ', ' + x.name }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('userCtrl', function($scope, $http) {
$http.get("/test")
.success(function(response) {
$scope.user = response.data;
console.log(response);
});
});
</script>
Whenever I run this I get a blank page but in my console:
Am I missing something here? Thank you.
check in console if it is returned valid in success: console.log(data);.
If yes try: $scope.user = angular.fromJson(data);
Changing the value from the dropdown trying to open the modal and supposed to perform http request and body of will be filled with the response. But unable to open the modal. Any help will be really appreciated.
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller='NodeProvision'>
<select ng-model="nodes" ng-change="nodeprovision(nodes)">
<option value="">please select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Welcome to modal!!</h3>
</div>
<div class="modal-body">
<ul>
//<div ng-if="test">
<p>The response is {{items}} <span ng-bind="{{items}}"></span><i ng-hide="items" class="icon icon-refresh icon-spin">loading.........</i></p>
//</div>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<!-- <div ng-if="test">
<p>The response is {{response}} <span ng-bind="{{response}}"></span><i ng-hide="response" class="icon icon-refresh icon-spin">loading.........</i></p>
</div> -->
</div>
</body>
<script>
//Initializing the app
var app = angular.module('myApp',['ui.bootstrap']);
//Defining the controller to perform the business logic
app.controller('NodeProvision', ['$scope','$http','$modal', function($scope,$http,$modal) {
$scope.nodeprovision = function(node){
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
$http.get('http://ac-00075763.devapollogrp.edu:8080/NodeProvision/provision/urn:apol:provider:acp/list?guid=5d4dc79e-f623-40f8-a14f-646c59c7b89a').
success(function(data, status, headers, config) {
$scope.items = data
}).
error(function(data, status, headers, config) {
// log error
});
}
}
});
};
}
}]);
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
</script>
</html>
Plunker Demo
Here is a fairly straightforward version of what you're trying to do. I have used a service (which would normally get the records using an $http request) in the resolve to keep things nice and clean.
Importantly, you should note the use of the return in the resolve objects. Without these, there is nothing to signal to the resolve that everything is done and it can allow the modal.open to do it's thing! Here's a great tutorial on using resolve with routes. The resolve property in the $modal service works identically to the one in ngRoute.
app.controller('ModalDemoCtrl', function ($scope, $modal, Data) {
$scope.animationsEnabled = true;
$scope.open=function(){
var modalInstance=$modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
loaddata: function(Data) {
return Data.get('allrecords');
},
selected: function () {
return $scope.model.id;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, selected, loaddata) {
$scope.allrecords = loaddata.records;
$scope.selected = selected;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
i using the login via popup window in angular application. After popup i need to fill username and password , then i hit the sign in button , i ill get the json response , based on the response i have to show user account options menu using ng-show . for this case i m using following service and controller
my service code snippt
factory('services', ['$http', function ($http, logger) {
var ser = {};
ser.userLogin = function (data) {
return $http({
method: "post",
url: "login",
data: data,
async: true,
cache: false,
}).success(function (result) {
return result.data;
}
);
};
return ser;
}])
my controller code snippet
$scope.submitLogin = function () {
return services.userLogin($scope.login).then(function (data) {
var result = data.data;
if (result) {
console.log(result);
$scope.usercontrol = true;
console.log($scope.usercontrol);
ngDialog.close();
}
})
}
Template code
<ul ng-hide="usercontrol" class="nav navbar-nav navbar-right">
<li><a ng-click="signIn()"> <strong>Sign In</strong></a></li>
<li><a ng-click="signUp()"><strong>Sign Up</strong></a></li>
</ul>
<ul ng-show="usercontrol" class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/account')}"> <strong>My Account</strong></li>
<li><strong>Sign Out</strong></li>
</ul>
based on above code in my application working finely but not set $scope.usercontrol . any mistake i did?
demo plnkr.co/edit/EbfPjKWh6f4nwNcoqly1?p=preview
I have done some modification over the code.
Only thing is you might have not included the service in you controller function as a parameter.
html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>SO Question</h1>
<div ng-controller="LoginCtrl">
<ul ng-hide="usercontrol" class="nav navbar-nav navbar-right">
<li><a ng-click="signIn()"> <strong>Sign In</strong></a></li>
<li><a ng-click="signUp()"><strong>Sign Up</strong></a></li>
</ul>
<div ng-hide="usercontrol">
<input type="text" ng-modal="login.username" placeholder="username">
<input type="password" ng-modal = "login.password" placeholder="password">
<button ng-click="submitLogin()">Sign IN</button>
</div>
<ul ng-show="usercontrol" class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/account')}"> <strong>My Account</strong></li>
<li><strong>Sign Out</strong></li>
</ul>
</div>
</body>
</html>
script.js
var app = angular.module('app', []);
app.controller('LoginCtrl', ['$scope', '$http', '$timeout', 'LoginService', function($scope, $http, $timeout, LoginService){
$scope.usercontrol = false;
$scope.submitLogin = function() {
LoginService.userLogin($scope.login).then(function (data) {
var result = data;
if (result) {
console.log(result);
$scope.usercontrol = true;
console.log($scope.usercontrol);
}
});
};
}]);
app.factory('LoginService', ['$http', function($http){
var ser = {};
ser.userLogin = function (data) {
return $http({
method: "GET",
url: "login.json",
data: data,
async: true,
cache: false,
}).success(function (result) {
return result.data;
}
);
};
return ser;
}]);
I have made a plunkr on this http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview
UPDATE
You have missed to add scope: $scope to continue in the ngDialog, and please check on the CSS issues.
http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview
UPDATE
I have forked your code http://plnkr.co/edit/J6i6QY4sO3ZzoEvbnzJ3?p=preview and changed 2 things, scope: $scope and for CSS issues I have changed the template into plain and removed controller.
ngDialog.open({
template: 'signinDialog',
scope: $scope,
className: 'ngdialog-theme-plain'
});
I'm working on an mobile app and I'm having problems with getting data to the controller. What i do is i get the data from a service and that works well (on routing this is '/' or root directory):
var listdnModule = angular.module('listdn', []);
listdnModule.factory('getActiveDnService', ['$http', function ($http) {
return {
getActiveDnSvc: function (izvajalecID) {
return $http({ method: 'POST', url: 'svc.aspx/getActiveDN', data: "{'izvajalecID':" + "'" + izvajalecID + "'}", cache: true });
}
};
}]);
listdnModule.controller('listdnCtrl', ['$scope', '$http', 'getActiveDnService','$rootScope', function ($scope, $http, svc, $rootScope) {
$scope.mjav = 1;
svc.getActiveDnSvc($scope.mjav).success(function (data) {
$rootScope.dnlist = data.d;
$scope.listdn = data.d;
});
}]);
So this works fine. It sets the data to the rootScope and to localscope and reads it from local scope.
Then i'm linking the list of Costumers to costumerdetail. The route settings are like this:
mSvc.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'tmpl/listdn.html',
controller: 'listdnCtrl'
}).
when('/settings', {
templateUrl: 'tmpl/nastavitve.html',
controller: 'settings'
}).
when('/dndetail/:dnid', {
templateUrl: 'tmpl/dndetail.html',
controller: 'dndetailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
The error comes after i try to get dndetail. I get the right ID from $routeParams but i dont get the data in the right time. The code is this:
var dndetail = angular.module('dndetail', []);
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
console.log($rootScope.dnlist[0]);
$scope.datal = $rootScope.dnlist;
$scope.id = $routeParams.dnid;
for(var i = 0; i <= datal.length; i++) {
if (datal[i].ID === $scope.id) {
$scope.data = datal[i];
}
}
}]);
And this is the error i get:
As you can see the console.log gets the object and prints the output (I masked it because it's company data) while datal is undefined. The special AngularJS tab in chrome DevTools also says the data is there:
And for the end the template of the view that doesnt get data:
<ul ng-controller="dndetailCtrl" class="list-group">
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Naslov</div>
<div class="pull-right">
<a ng-href="https://maps.google.com/?q={{ data.Ulica }} {{ data.Posta }} {{ data.Kraj }}">
{{ $root.dnlist[1].Ulica }}<br />
{{ data.Posta }} {{ data.Kraj }}<br />
{{ data.Drzava }}</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Datum izvedbe</div>
<div id="kupec-pe" class="pull-right">{{ data.DatumIzvedbe }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Datum naloga</div>
<div id="kupec-dst" class="pull-right">{{ data.DatumNaloga }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Opis:</div>
<div id="kupec-komerc" class="pull-right">{{ data.Opis }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Šifra dejavnosti:</div>
<div id="kupec-sif" class="pull-right">{{ data.sifDej }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Šifra dejavnosti:</div>
<div id="Div1" class="pull-right">{{ data.DatumIzvedbe }}</div>
</div>
</li>
</ul>
Any ideas?
UPDATE
This is the new controller:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
$rootScope.dnlist;
$scope.id = $routeParams.dnid;
for (var i = 0; i <= $rootScope.dnlist.length; i++) {
if ($rootScope.dnlist[i].ID === $scope.id) {
$scope.data = $rootScope.dnlist[i];
}
}
}]);
still doesnt work. From an array of elements i want to get one element by id and then save it to data so i can read from data. For loop doesnt get the data (unindentified dnlist) but if i bind {{ $root.dnlist[1].Property }} in the template it works.
I don't think problem is fixed by this answer and tried to delete it, I have undelete it as it has been referred in a comment.
$http in angularjs returns a promise, you can't use the promise directly to access the data, check this answer where it answer something very similar.
If anyone was wondering the problem was with the equality operator. If I change === with the one that checks type == i dont get the TypeError: Cannot read property 'ID' of undefined error any more. Since this is the solution to the problem I'd like to have an explanation also. I'm a javascript beginner to be true and if someone got an idea what happened here, I'd very much like to know the explanation.
The new controller that works:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
$rootScope.dnlist;
$scope.id = $routeParams.dnid;
for (var i = 0; i <= $rootScope.dnlist.length; i++) {
if ($rootScope.dnlist[i].ID == $scope.id) {
$scope.data = $rootScope.dnlist[i];
}
}
}]);