I'm trying to load data into my angular module from json file but instead of data i'm getting this.
var app = angular.module('myApp', []);
app.controller("myCtrl",function($scope, $http)
{
$http.get('bookData.json').then(function(response){
$scope.books = response.data;
});
});
And in my view displaying data as:
<body ng-controller="myCtrl">
<div>{{"Book details"}}</div>
<div>
<table>
<tr ng-repeat="x in books">
<td>x.bookid</td>
<td>x.author</td>
</tr>
</table>
</div>
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</body>
</html>
But i'm getting output as:
Book details
x.bookid x.author
x.bookid x.author
x.bookid x.author
x.bookid x.author
https://plnkr.co/edit/ZqcnwOKZUdUo5eDIdjlh?p=preview
You need to wrap your logic with {{ and }} to make it recognisable by angular. Otherwise it'll print out as just plain text.
e.g
<td>{{x.bookid}}</td>
<td>{{x.author}}</td>
<body ng-controller="myCtrl">
<div>
<H1>Book details</H1>
</div>
<div>
<table>
<tr ng-repeat="x in books">
<td>{{x.bookid}}</td>
<td>{{x.author}}</td>
</tr>
</table>
Related
I am a learner in angular JS. I am trying out the $http and set the corresponding value to the scope variable. But It doesnt work. Below is the snippet of the html.
<div ng-app="fileapp" ng-controller="myctl" ng-init="hidevar=true">
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody ng:repeat="x in dataobj">
<tr><td>{{x.url}}</td></tr>
</tbody>
</table>
</div></div>
below is the success call back script with angular js
success(function(data) {
console.log(data);
var d=angular.fromJson(data);
console.log('d is:'+d.url);
$window.alert(d.url);
$scope.dataobj=data;
//$scope.url=data.url;
$scope.hidevar =false;
I am getting the expected url string value in console.log and also in the window.alert. But the same is not getting refelected in $scope.dataobj=data; and
$scope.hidevar =false;
The ng hidden is not setting to false and also the json data from the service is not getting set to dataobj.
Below is the console output.
I changed the list div like the below but still no luck
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody>
<tr><td>{{dataobj.url}}</td></tr>
</tbody>
</table>
</div>
I added a hidden section and updated the hidden variable inside the scope but that is not reflecting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<!--<script src="app.js"></script> -->
</head>
<body ng-app="plnkrApp" ng-controller="DemoController" ng-init="myvar=true">
<h1>Array</h1>
<table>
<tbody ng:repeat="x in array">
<tr>
<td>{{x.url}}</td>
</tr>
</tbody>
</table>
<h1>Object</h1>
<table>
<tbody ng:repeat="x in object">
<tr>
<td>{{x}}</td>
</tr>
</tbody>
</table>
<div ng-hide="myvar">
<p>Hidden Section</p>
</div>
<script>
var app = angular.module('plnkrApp', []);
app
.controller("DemoController", function($scope) {
$scope.array = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
$scope.object = {url: 'test1'};
$scope.myvar=false;
});
</script>
</body>
</html>
The hidden section is not getting displayed. Why the data is not binding to hidden variable?
You're getting an object back, not multiple objects in an array.
Doing ng-repeat on this object would just need {{x}} instead of {{x.url}} but that's not right.
Create a test scope variable with an array of 2 or more of those objects. You'll see that it'll work the way you want.
$scope.test = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
Edit: Here is a Plunkr showing the difference:
http://embed.plnkr.co/6wSuAPHPCSZF60Pph85V/
I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly. {{contactlists[0].name}}
<!DOCTYPE>
<html ng-app="nodeapp">
<head>
<title>AngularJs with Nodejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="nodeappctrl">
<div class="row">
<h1>Angularjs with api's</h1>
<p>{{contactlists[0].name}}</p>
</div>
</div>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlists">
<td>{{$index}}</td>
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script type="text/javascript">
var nodeapp = angular.module('nodeapp', []);
nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
function($scope, $rootScope, $log, $http) {
var contactlist = {};
$http.get('/contactlist').success(function(data) {
$scope.contactlists = data;
//$scope.$apply();
console.log(JSON.stringify($scope.contactlists), null,2);
});
}
]);
</script>
<!--
// dummy data
var contactlists =[
{
name: 'Rajesh',
email: 'raj#g.com',
number: '11 - 111 - 11111'
}, {
name: 'Rajesh2',
email: 'raj2#g.com',
number: '22 - 222 - 222222'
}, {
name: 'Rajesh3',
email: 'raj3#g.com',
number: '33 - 333 - 333333'
}
]-->
</body>
</html>
</html>
Place ng-controller inside the <body> tag.
You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.
<body ng-controller="nodeappctrl">
//your code here..
</body>
The problem is here:
<div class="container" ng-controller="nodeappctrl">
The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.
For example, move ng-controller="nodeappctrl" to the body tag.
I'm using NgMaps in my Angular app
I'm trying to give the center point dynamically, but it's taking some other points which is not given by me:
HTML:
<ng-map zoom="5" center="{{center}}" style="height:600px">
</ng-map>
In controller:
$scope.center =[18.9750, 72.8258];
Here's the Plnkr Code:
http://plnkr.co/edit/hbNZdSKuUZqVSsJN7he3?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.4.7/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ng-map zoom="8" center="{{center}}" style="height:600px">
<!-- <ng-map zoom="5" center="[20.1450107,77.8764691]" style="height:600px"> -->
<custom-control id="home" position="TOP_RIGHT" index="1000">
<div style="background-color: rgba(0,0,0,.5); color:#fff;width:200px;padding: 10px;" ng-if="customMarkers[0].clustors">
<table class="table table-condensed">
<thead>
<tr>
<th style="width: 50%">Priority</th>
<th style="width: 50%">Color</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in customMarkers[0].clustors">
<td>Priority {{$index}}</td>
<td class="{{clustorcolors[$index]}}"></td>
</tr>
</tbody>
</table>
</div>
</custom-control>
<div ng-repeat="(key, value) in customMarkers[0].clustors">
<div ng-repeat="point in value">
<custom-marker position="{{point.coordinate}}" on-mouseover="clustormouseover()" on-mouseout="clustormouseout()">
<div class="mappointer {{clustorcolors[$parent.$index]}}" ng-click="clickme(key,$index)">
<div class="infobox" id="clustor_{{$parent.$index}}_{{$index}}" ng-show="point.visibility">
BM_M_EXECTIVE : {{point.BM_M_EXECTIVE}},<br>
BM_PROFIT : {{point.BM_PROFIT}},<br>
BM_QUANTITY : {{point.BM_QUANTITY}},<br>
BM_NAME : {{point.BM_NAME}},<br>
BM_DISTRICT : {{point.BM_DISTRICT}},<br>
BM_TOTALPURCHASE : {{point.BM_TOTALPURCHASE}},<br>
</div>
</div>
</custom-marker>
</div>
</div>
</ng-map>
</body>
</html>
I don't know your case, but it seems working fine with me with the following example.
http://plnkr.co/edit/cec5b88WpZcoiSd1Mq28?p=preview
javascript
vm.center = "37.7699298, -122.4469157";
vm.setCenter = function() {
vm.center = "38.7699298, -123.4469157";
}
});
html
center: {{vm.center}}<br/>
<button ng-click="vm.setCenter()">Set Center to "38.7699298, -123.4469157"</button>
</div>
I had the same problem, because ngMap does not recognize the $interpolateProvider (according to #allenhwkim). Solution:
HTML:
<ng-map id="map" zoom="5" style="height:600px"></ng-map>
Javascript:
var that = this;
NgMap.getMap('map').then(function(map) {
that.map = map;
that.map.setCenter(new google.maps.LatLng(18.9750, 72.8258));
});
I hope, it helps someone. Thanks #allenhwkim for ngMap!
Question: why isn't bootstrap like tooptips working when using it with angular ng-repeat and angular $interval
Behavior I'm seeing: when using bootstrap tooltips with angular ng-repeat and angular $interval, i am seeing the regular tooltips, not bootstrap like tooltips.
What i've tried:
if i use bootstrap tooltips with ng-repeat but disable the $interval, bootstrap tooltip works.
if i use bootstrap tooltips with $interval but remove ng-repeat, bootstrap tooltip works.
in the plunkr i've provided, lines 32, 33, you can disable/enable $interval for testing
http://plnkr.co/edit/6rUeJGsYfkgWMRrZoIYw?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({container: 'body', placement: 'bottom'}); // initialize bootstrap tooltips
});
var app = angular.module("test", []);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
//$scope.getTestInfo(); // if dont use interval, bootstrap tooltip works
$interval(function(){$scope.getTestInfo();}, 1000); // if use interval, bootstrap tooltip doesnt work
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td data-toggle="tooltip" title="{{count}}">{{stat.name}}</td>
<td data-toggle="tooltip" title="testcolumn2">{{stat.stat1 + count}}</td>
<td data-toggle="tooltip" title="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You can use AngularUI tooltip which does all the work for you. Then your markup would look like this:
...
<tr ng-repeat="stat in stats" style="position: relative">
<td tooltip="{{count}}" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.name}}</td>
<td tooltip="testcolumn2" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.stat1 + count}}</td>
<td tooltip="testcolumn3" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.stat2}}</td>
</tr>
...
See updated plunker.
I'm doing a basic Restangular example and it works on AngularJS 1.1, however on 1.2, the REST request is sent, data is received, but the table is not displayed properly.
I read through some threads here about upgrading from 1.1 to 1.2 but I don't see the issue as the example is very simple and does not explicitly use ngRoute, isolated scopes or custom directives.
HTML
<!DOCTYPE html>
<html ng-app="countries">
<head>
<meta charset="utf-8" />
<title>REST Country Example</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.angularjs.org/1.2.27/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.27/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdn.rawgit.com/mgonto/restangular/master/dist/restangular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<div>
<h2>Restangular Example with RESTCountries.eu</h2>
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<table class="table table-responsive table-striped">
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in countries | filter:search | orderBy:'name'">
<td>{{country.name}}</td>
<td>{{country.capital}}</td>
<td>{{country.alpha2Code}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JS
app = angular.module('countries', ['restangular']);
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl('http://restcountries.eu/rest/v1');
});
app.controller('mainCtrl', function($scope, Restangular) {
$scope.countries = Restangular.all('all').getList();
});
1.1.5 Plunk (working)
1.2.27 Plunk (not working)
Any idea what is missing/incorrect in order to get this working properly on 1.2?
Cheers,
I have never used restangular before. Looks like it returns a promise for 1.2 version, instead of data, I am able to load the data with this minor modification:
app.controller('mainCtrl', function($scope, Restangular) {
Restangular.all('all').getList().then(function(result) {
$scope.countries = result;
});
});
Plunker