Im new to angular and js
please help me getting json key and bind to ng-model
Following is my code
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-model="table.macid"></li>
</ul>
and my js is
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.table={}
$http.get("test.json")
.success(function(response) {
$scope.names = response
$scope.table.macid= Object.keys($scope.names.day.weekday.Monday.mac_id)
console.log($scope.table)
});
});
this is my plunker link http://plnkr.co/edit/6CoOAp0X8FZw1JODXSHT?p=preview
Any help is appreciated, Thanks in advance
You are confusing ng-model with ng-bind:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-bind="table.macid"></li>
</ul>
See updated plunker
In case you need to iterate over the collection, use ng-repeat. See zszep answer for that.
You can dump it out on your html like this:
<li ng-model="table.macid"></li>{{table.macid}}
It should work, it did for me. You may think you see it because the tag is in an < li > element. What are you expecting that to do?
Use ng-repeat in the li tag like this plunker:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="macid in table.macid">{{macid}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.table={}
$http.get("test.json")
.success(function(response) {
$scope.names = response
$scope.table.macid= Object.keys($scope.names.day.weekday.Monday.mac_id)
});console.log($scope.table)
});
</script>
</body>
</html>
Related
Here is my code, Actually when I click on function but not showing alert and not getting error in console. So please tell me how to do.
HTML Code
<li class="has-megamenu" ng-click="homepage()" ><a ><span >Home</span></a>
</li>
app.js
app.controller('myController', function($scope){
$scope.homepage = function(){
alert('hi');
}});
There can be two reasons
1- Not using ng-app directive in the root element of your application.
2- You have not defined ng-controller properly.
Please follow following working code.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.homepage = function() {
alert('hi');
}
});
</script>
</head>
<body ng-app="app">
<div ng-controller="myController">
<ul>
<li class="has-megamenu" ng-click="homepage()"><a><span >Home</span></a>
</li>
</ul>
</div>
</body>
</html>
First You have to add ng-app = "app"
Second You have to add ng-controller = "myController"
Final
Please check the updated code:
var app = angular.module("app", []);
app.controller('myController', function($scope){
$scope.homepage = function(){
alert('hi');
}});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "myController">
<li class="has-megamenu" ng-click="homepage()" ><a ><span >Home</span></a>
</li>
<div>
</body>
</html>
I'm trying to pull the list of current streams from the API and iterate that information with AngularJS. When I put in the JSON data directly in the js file, Angular works fine. However, when using an http request as shown below, I get a blank page. I've searched high and low, but have had trouble applying it to my specific issue. Any help is appreciated. Thanks!
Http file:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
Repeat.js
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.jsonp("https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK")
.success(function(response) {$scope.names = response.streams;});
});
https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK isn't JSONP (it is plain JSON).
You need a server that will make a JSONP response in order to use $http.jsonp().
Well, using $http.get('url') does work. I was incorrectly thinking the 'data' object was an array and passing "[0]" to it which was incorrect. Below is the code and it works to pull the info and repeat the data as indicated in the markup. Thanks for your help!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in data.streams">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.get('https://api.twitch.tv/kraken/streams?').success(
function(data, status){
$scope.data = data;
});
});
I had already declared my app and controller in separate file and below is how i am loading my controller html DOM but it is not showing that message. Can someone please guide how to achieve this.
HTML:
<div id="bnProblemList">
<div ng-controller="problemListCtrl" data-ng-init="init()">
<div ng-view="">this is my message = {{message}}</div>
</div>
</div>
JS:
html = $j('#bnProblemList').html();
$compile(html)(scope);
Please let me know how to inject or load ng-controller html dynamically.
Your controller declaration is wrong. You should do it like this:
var myApp = angular.module('myApp',[]);
myApp.controller('problemListCtrl', ['$scope',
function($scope) {
$scope.message = "This is my message :-)";
}
]);
A proper way is to declare your Controller into an anonymous function, and add it to a module. Then, you have to set your ngApp.
Controller.js
Here, we will declare our controller, and create an app module. Then, we will declare ctrl as our controller into our app module.
(function(){
function Controller($scope) {
$scope.name = 'toto';
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
HTML
<body ng-app='app' ng-controller="ctrl">
<p>My name is {{name}}</p>
</body>
And don't forget to include your script tag :
<script src="controller.js"></script>
You can try Like below Example:-
Html Page:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title> Controller</title>
<script src="../Js/angular.min.js"></script>
<script src="../Js/Controller.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
{{ Msg }}
</div>
</body>
</html>
ControllerJs Page:
var MyApp=angular.module("MyApp",[]);
MyApp.controller("MyFirstController",function($scope){
$scope.Msg="Hello First Conroller";
})
i was able to load/ inject controller dynamically by the help of below code
<div id="bn" ng-controller="myCtrl as vm">
<div ui-view=''></div>
</div>
<script>
angular.element(document).injector().invoke(function($compile, $state) {
$state.go('myCtrl');
var scope = angular.element($j("#bn")).scope();
$compile($j("#bn"))(scope);
});
</script>
I am trying to build my first AngularJS routing code but I can't seem to get it to work and error console isn't of much help.
My HTML page:
<body ng-app="myApp">
<div ng-controller="AppController">
<div class="nav">
<ul>
<li>Template 1</li>
<li>Template 2</li>
<li>Template 3</li>
<li>SomePage</li>
<li>Otherwise</li>
</ul>
</div>
<div ng-view></div>
</div>
</body>
app.js:
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/template1', {
templateUrl:'partials/template_1.html'
})
.when('/template2', {
templateUrl:'partials/template_2.html'
})
.when('/template3', {
templateUrl:'partials/template_3.html'
})
.when('/somepage', {
templateUrl:'partials/somepage.html'
})
.otherwise({
redirectTo:'partials/otherwise.html'
});
});
Could someone please tell me what I'm doing wrong here?
Upgrade your angular.js version to 1.2.26 which is most stabled Angular Version.
Other code looks fine to me.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
Thanks.
I have done the following in AngularJS. The data is obtained from the URL mentioned.
If you open the URL, you can see the response it provides.
However, I am not able to obtain the title inside HTML via angularjs.
I am getting a blank result. What am I doing wrong?
Has it something to do with JSON encoding?
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope) {
$http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
$scope.mydata = data;
}
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
<ul>
<li ng-repeat="data in mydata">
{{data.Title}}
</li>
</ul>
</body>
</html>
</html>
There is quite a lot wrong with your code :-(
Syntax errors, not injecting $http, the response is a single movie instead of a collection.
Try the following.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope, $http) {
$http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
$scope.mydata = data;
});
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
{{mydata.Title}}
</body>
</html>
Example with a collection:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope, $http) {
$http.get('http://www.omdbapi.com/?s=True%20Grit').success(function (data) {
$scope.mydata = data;
});
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
<ul>
<li ng-repeat="data1 in mydata.Search"> {{data1.Title}} </li>
</ul>
</body>
</html>
I created a working plunker mistakes including: not creating an app module, not injecting $http, trying to iterate over "data" which your scope doesn't know about - since you have "mydata" in your scope. and iterating over an object the wrong way. (it would be correct to iterate like this if you were getting an array of objects) see this answer for details