Where is the wrong because I did all for this work. Please, someone help me!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('heroisCtrl', function($scope, $http) {
$http.get("https://angularjs.org/greet.php?callback=herois&name=Super%20Hero")
.success(function(data) { $scope.names = data;});
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="heroisCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
<td>{{ x.greeting }}</td>
</tr>
</table>
</div>
</body>
</html>
At final I have this information by console: XMLHttpRequest cannot load angularjs.org/greet.php?callback=herois&name=Super%20Hero. No 'Access-Control-Allow-Origin' header is present on the requested resource.
When fatch data from call back api then must set callback=JSON_CALLBACK
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('heroisCtrl', function($scope, $http) {
$http.get("https://angularjs.org/greet.php?callback=JSON_CALLBACK&herois&name=Super%20Hero").success(function(data) { $scope.names = data;});
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="heroisCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
<td>{{ x.greeting }}</td>
</tr>
</table>
</div>
</body>
</html>
this problem is your backend!
You have to add
AllowOrigin = '*' //not secure
Or add
AllowOrigin: 'yourClientAddressOrIp'
Not sure about sintax, but the idea is as i write before, then should be there. Sintax depends on your backend languaje.
And thats All
Regards
Related
I am facing an issue while displaying the nested data inside the ng-repeat. I get data for the first 4 fields but those which are more nested like the label and onwards field data do not show up. the last 5 fields appear to be empty and does not fetch the data. Will be glad if anyone could help troubleshoot the issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- <p>Today's welcome message is:</p> -->
<table border="2">
<tr>
<th>deliveryRecipient</th>
<th>Pick Up Locality</th>
<th>Delivery Locality</th>
<th>Created On</th>
<th>Name</th>
<th>category</th>
<th>Item Price</th>
<th>Weight</th>
<th>Qty</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in myWelcome">
<td>{{x.deliveryRecipient}}</td>
<td>{{x.pickupLocality}}</td>
<td>{{x.deliveryLocality}}</td>
<td>{{x.createdOn}}</td>
<td>{{x.label}}</td>
<td>{{x.category}}</td>
<td>{{x.actualPriceLabel}}</td>
<td>{{x.weight}}</td>
<td>{{x.quantity}}</td>
<td><button onclick="showgraphqldata()" type="button" class="view">View</button></td>
</tr>
<td ng-repeat="y in x.items">
<td>
<tr ng-repeat="z in y">
<td>{{z.label}}</td>
<td>{{z.category}}</td>
<td>{{z.actualPriceLabel}}</td>
<td>{{z.weight}}</td>
<td>{{z.quantity}}</td>
</tr>
<input type="hidden" value="{{x.uid}}" />
</table>
</div>
<!-- <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome"
variable.</p> -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http({
method: "GET",
url: "https://api-stg.martcart.pk/api/v1/merchants/incomingOrders?archived=false&isIncomingOrders=true&isPurchaseOrders=true&loadItems=true&pageNumber=1&recordsPerPage=100&statusIn=NEW,VIEWED",
headers: {
datatype: 'JSON',
, 'Content-Type': 'application/json'
}
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.view', function () {
var uid = $(this).parent().prev().val();
</script>
</body>
</html>
attached images are the responses if json data
enter image description here
enter image description here
When I use this HTML template in my server, the head is copied on the body. I get in
<table id="myTable">
the whole head repeated.
<title>IndoorLoc App</title>
That title tag is the first that appears after the table tag and I don't understand wht thid happens and following that comes all the head tag including js scripts.
<!DOCTYPE>
<html>
<head>
<title>IndoorLoc App</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript">
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if (req.readyState == 4 && req.status == 200) {
document.getElementById('myTable').innerHTML = req.responseText;
}
}
req.open('GET', 'http://localhost:8080/data', true);
req.send();
}
setInterval(function(){ajax();}, 1000);
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header id="head">
<h1>IndoorLoc</h1>
</header>
<table id="myTable">
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows1:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows2:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
</table>
</body>
</html>
The response you are getting and directly inserting inside table tag, what kind of data is that, If it is table body markup then it will work otherwise it will just add string or response whatever you are getting.
I created a rest web api and using AngularJS, I want to receive those json data and store them in a table. I am new to AngularJS. I was able to get all the json data but I want to split them up into each row. I am not sure if I am doing to correctly or not but here is my code:
index.html
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="lib/angular.js"></script>
<script src="angularDemo.js"></script>
</head>
<body>
<div ng-controller="demoController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
</tr>
<tr ng-repeat=" quiz values">
<td>{{result.id}}</td> <!-- Does not get any value-->
<td>{{result.question}}</td> <!-- Does not get any value-->
</tr>
</table>
<h1>{{result}}</h1> <!-- gets all the json data -->
</div>
</body>
</html>
js
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope, $http) {
$http.get("http://localhost:8080/quiz/webapi/quiz")
.then(function(response) {
$scope.result = response.data;
});
});
Your ng-repeat is not good,
If i understand your array of results is in $scope.result, so you have to do this kind of ng-repeat :
<tr ng-repeat="row in result">
<td>{{row.id}}</td>
<td>{{row.question}}</td>
</tr>
How to Pass Scope Variable in ng-click and how to access the Parameter in angularJS Function within Controller ?
My Source Code is
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) { $scope.names = response.data.records; });
$scope.SuperFunction = function (id) {
alert(id);
};
});
</script>
</body>
</html>
My Ouptput Screen Shot at the Time of Click
Output Screen Shot in Firefox with Inspect Element Window
I got an parameter value as {{x.Name}} instead of actual value.
Mistake is here:
ng-click="SuperFunction('{{x.Name}}')"
It should be:
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
Change as per suggestion. It will work.
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.