i want to send a http get request which is not a problem.
But the problem is i want to disply the data from the server page. Does it has to be a JSON page to display the data from remote server ? or any sort of data can be displayed ? if yes , then how
Thank you
<div class="form" ng-app="myApp" ng-controller="myCtrl">
<p>Enter URL : <input type="text" ng-model="url" /></p>
<p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p> <!-- 1 -->
<p>
<ul ng-repeat="post in posts">
<li>{{post}}</li>
</ul>
</p>
<div ng-bind="result"></div> <!-- 5 -->
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.callAPI = function() { // 2
//console.log($scope.url); //3
$http.get($scope.url)
.success(function(response) {
$scope.posts = response.data; //4
});
};
});
</script>
</body>
</html>
another version of code
<div class="form" ng-app="myApp" ng-controller="myCtrl">
<p>Enter URL : <input type="text" ng-model="url" /></p>
<p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p>
<div ng-bind="result"></div> <!-- 5 -->
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.$watch('url', function() {
fetch();
});
function fetch() {
console.log($scope.url);
$http.get($scope.url)
.success(function(response) {
$scope.result = response.data;
});
}
$scope.callAPI= function() {
this.setSelectionRange(0, this.value.length);
}
});
</script>
</body>
</html>
Like the comments says, I believe that angular look at the content Type of the response to parse the data. Have you try added the accept header type?
What is the content type of the response?
var req = {
method: 'GET',
url: 'http://example.com',
headers: {
'Accept': change this to whatever content you want to accept
},
data: { test: 'test' }
}
$http(req).then(function(){...}, function(){...});
hey i have found my answer of my question ...
there was a mistake in the source code
here is the right one
<div class="form" ng-app="myApp" ng-controller="myCtrl as controller">
<p>Enter URL : <input type="text" ng-model="url" /></p>
<p><input type="submit" value="CHECK" ng-click="clickButton()" /> </p>
<p>
<ul>
<li ng-repeat="data in result">
{{data}}
</li>
</ul>
</p>
</div>
and
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.clickButton = function() {
console.log($scope.url);
$http.get($scope.url)
.then(function(response) {
$scope.result = response.data;
});
};
});
</script>
:)
if anyone has a similer problem , i hope this answer will help ..
cheers
function functionName(){
$http.get(URL).success(function(response){
$scope.variable = response;
})
}
inside get() put your url, if your url returning any data then it will go to success() function.
Related
Hello I'm using angular js $http to get json data
json Data
{"Data":["index":[{"Name":"append_here_1"},{"Name":"append_here_2"}]]}
App.js
var app=Angular.module('app',[]);
Request.js
app.service('Request_service', function() {
this.get_json=function(){
return $http.post('http://...', {
params_1: "123",
params_2: "abc"
}).then(function success(e) {
return e.data;
},function fail(e){
return false;
});
}
});
Controller.js
$scope.index_data=[];
app.controller('myCtrl', function($scope, Request_service) {
Request_service.get_json().then(function(data)
$scope.index_data=data.Data[0].index;
for(var i=1;i<3;i++){
var id_data="#append_here_"+i;
$(id_data).append('<input value="'+i+'">');
}
);
});
template.html
<body ng-app="app">
<div ng-controller="myCtrl">
<div ng-repeat="obj in index_data ">
// {{index_data.Name}} = append_here_1
<div id="{{index_data.Name}}">
</div>
<div>
the problem is when the controller load the data it does not append
<div id="append_data_1">
</div>
<div id="append_data_2">
</div>
what it should look like
<div id="append_data_1">
<input value="1">
<input value="2">
</div>
<div id="append_data_2">
<input value="1">
<input value="2">
</div>
It will be appreciate if anyone could improve this code
thank you in advance
Modify this function declaration
function get_json () {
var deferred = $q.defer();
$http.post('http://...', {
params_1: "123",
params_2: "abc"
})
.success(function (result) {
deferred.resolve(result.data);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
And modify your html code
<div ng-repeat="obj in index_data ">
// {{obj.Name}} = append_here_1
<div id="{{obj.Name}}">
{{obj.Name}}
</div>
<div>
I'm trying to make a form that sends an url of the type /:id/:option where I know the id before entering the form but the option-attribute is the one that the user selects from the radio-buttons. After submitting the form I should move to the page /:id/:option. I'm also using angulasJS with my application.
So how can I send the url with the POST-method?
html
<form method="POST">
<div class="voteOptions" ng-repeat="item in id.data.options">
<label class="radioButtons">{{item.title}} votes:{{item.votes}}
<input type="radio" name="option" value={{item.option}}>
<span class="radioSelector"></span>
</label>
</div>
<input type="submit" id="voteSubmit" value="Vote!">
</form>
.post-call
app.post('/:id/:option', (req, res) => {
var poll = polls[req.params.id-1];
poll.options[req.params.option-1].votes++;
res.json(poll);
});
Create Controller and make Http call from there.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form method="POST" ng-submit="submit()">
<div class="voteOptions" ng-repeat="item in options">
<label class="radioButtons">{{item.title}} votes:{{item.votes}}
<input type="radio" name="option" value={{item.option}} ng-model="option.val">
<span class="radioSelector"></span>
</label>
</div>
<input type="submit" id="voteSubmit" value="Vote!">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
var id = 12345;
$scope.option = {val:0};
$scope.options= [{
title : 'option-1',
votes : 5,
option : 1
},{
title : 'option-2',
votes : 5,
option : 2
}];
$scope.submit = function(){
console.log('Url', `<domain>/${id}/${$scope.option.val}`);
// Generate url and call http post
// $http.post(url, body, config)
// .success(function (data, status, headers, config) {
// })
// .error(function (data, status, header, config) {
// });
}
});
</script>
</body>
</html>
This question already has answers here:
Share data between AngularJS controllers
(11 answers)
Closed 6 years ago.
I have a team_list page and a team page. A user will have a list of teams they are in in the team_list page and then click on one of the teams to go to its team page. I am not sure how to send the data that the team page that the user is going to is Team A's teampage or Team B's team page. So how do I share data between controllers?
I know I should be using services but I'm not sure how to use them in this context..I've tried some methods and commented out some but I'm still not sure how to go about this.
Using node.js and express framework for backend
team_list.html:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head>
<title>Team List</title>
</head>
<body>
<h1>
Welcome to Your Team List Page!
</h1>
<!--<div ng-app="teamListPage" ng-controller="listController">
<fieldset>
<legend>Your Teams</legend>
<ul>
<li ng-repeat="x in [dave, david, darrell]">{{x}}</li>
<input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/>
</ul>
</fieldset>
</div>-->
<div ng-app="teamListPage" ng-controller="listController">
<li ng-repeat="x in records">
{{x.team_name}}<br/>
<input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/>
</li>
<input type="button" id="Create" name="Create" value="Create New Team" ng-click="enterCreateTeamPage()" />
</div>
<script>
var page = angular.module('teamListPage', []);
/*page.factory('myService', function() {
var user_id = [];
var setUserID = function(newObj) {
user_id.push(newObj);
};
var getUserID = function(){
return user_id;
};
return {
setUserID: setUserID,
getUserID: getUserID
};
});*/
page.factory('myService', function(){
return {
data: {
user_ID: ''
},
update: function(userID) {
// Improve this method as needed
this.data.user_ID = userID;
}
};
});
page.controller('listController', function($scope, $http, $window, myService) {
console.log(myService.data);
var login_http = $http({
method: 'GET',
url: '/team_req',
params: { user_id: 1 }
}).then(
function (response) {
//$window.alert(response.data[0].team_name);
$scope.records = response.data;
//console.log($scope.records[1]);
//alert('successfull ...');
}, function (response) {
$window.alert('wrong username/password');
}
)
$scope.enterTeamPage = function() {
$window.location.href = '/teamPage';
};
$scope.enterCreateTeamPage = function() {
$window.location.href = '/createTeamPage';
};
})
</script>
</body>
</html>
team_page.html:
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Team Page</title>
</head>
<body>
<h1>
Team Page
</h1>
<div ng-app="teamPage" ng-controller="teamController">
<form id="Communication Board">
<fieldset>
<legend>COMMUNICATION BOARD</legend>
<h3>
chat feature coming up!
</h3>
<legend>videocall</legend>
<h4>
video call feature coming up!
</h4>
<legend>screenshare</legend>
<h5>
screenshare feature coming up!
</h5>
</fieldset>
</form>
<form id="Data Board" action="">
<fieldset>
<legend>DATA BOARD</legend>
<h6>
calendar feature coming up!
</h6>
<legend>announcements</legend>
<h7>
All features are coming up very soon!
</h7>
</fieldset>
</form>
<p>
<input type="button" id="CodingZone" name="CodingZone" value="Go to Coding Zone" ng-click="enterCodingPage()" />
</p>
</div>
<script>
var page = angular.module('teamPage', []);
page.controller('teamController', function($scope, $http, $window) {
//get the history of the chat board
$scope.getChatHistory = function() {
var create = $http({
method: 'Get',
url: '/chatHistory'
}).then(
function successful(response) {
$scope.theResponse = response.data;
}, function unsuccessful(response) {
alert('got an error back from server');
$scope.theResponse = response;
});
}
$scope.enterCodingPage = function() {
$window.location.href = '/codingPage';
};
})
</script>
</body>
</html>
Also should I put my service in app.js or index.js?
The best way to share data between controllers or components (wrappers for directives) is to use angular services and inject them into controllers. Cuz services are singletons so each of them presents single state for all components where it will be injected.
I've got a problem related to the visibility of a button. I have to hide a button when there is no text in the form field, and show it back when it's filled. I've got some code:
<div class="TextAreaCont">
<input ng-model="pageUrl" placeholder="Facebook Page URL" type="text">
</div>
<div class="ButtonCont" ng-show="ctrl.isButtonVisible()">
<button ng-click="ctrl.send()">Fetch data</button>
</div>
And I wrote it:
Facebook.controller('PageCtrl', ['$scope', function($scope){
$scope.isButtonVisible = function(){
if($scope.pageUrl){return true}else{return false}
};
Where is the problem?
To be honest, I've never leart JS and Angular.
Here is my solution
var Facebook = angular.module('Facebook', []);
Facebook.controller('PageCtrl', [function(){
var ctrl = this;
ctrl.isButtonVisible = function(){
if(ctrl.pageUrl){
return true;
}else{
return false;
}
};
ctrl.send = function(){
console.log('Page URL: ' + ctrl.pageUrl)
};
}]);
See Plunker for more details.
Few problems that I can spot in your original code:
when using controller as syntax, use 'this' keyword, not $scope inside your controller
ng-model="pageUrl" should be ng-model="ctrl.pageUrl"
Just FYI, isButtonVisible() will be evaluated on every digest cycle, so there no need for watchers of ng-change.
try this.
i put simple example.
var app = angular.module('app', []);
app.controller('TestController', function ($scope) {
$scope.display = false;
$scope.isButtonVisible = function(pageUrl){
if(pageUrl){
$scope.display = true;
}
else{$scope.display = false;}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestController">
<input ng-model="pageUrl" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
<div class="ButtonCont" ng-show="display">
<button ng-click="send()">Fetch data</button>
</div>
<input ng-model="pageUrl2" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
<div class="ButtonCont" ng-show="pageUrl2">
<button ng-click="send()">Fetch data</button>
</div>
</div>
I have two textarea, I want to use the content on the first to update the second immediately the user clicks the textarea using ng-change. Bt when I click on the textarea, no update is made. Below is the two textarea
<textarea ng-change="content=emojiMessage.messagetext | colonToCode" placeholder="emoji..." ng-bind="emojiMessage.messagetext | colonToCode" id="messageInput"></textarea>
<input ng-hide="false" type="text" id="message" name="message" ng-model="content" value="{{content}}" />
What could be wrong?
Now the snippet is using ng-focus instead, but with the same function.
var app = angular.module('myApp', []);
app.filter('colonToCode', function(){
return function (data) {
return data + ' Something added by the filter';
};
});
app.controller('ctrl', function($scope, $filter) {
$scope.content = 'Something';
$scope.emojiMessage = {
messagetext: 'smilie face'
};
$scope.setContent = function(text){
$scope.content = $filter('colonToCode')(text);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="ctrl">
<textarea ng-focus="setContent(emojiMessage.messagetext)" placeholder="emoji..." ng-model="emojiMessage.messagetext" id="messageInput"></textarea>
<input ng-hide="false" type="text" id="message" name="message" ng-model="content" value="{{content}}" />
</div>
</div>