$http GET not showing in display in AngularJS - javascript

I am creating an app in AngularJS, where I am grabbing the data from the backend to display on the view. But, for some reason, I am getting the data in my console but not in my view. I will be so thankful if any one can help me solve this. Thanks in advance.
Here is my code. -Services
app.factory('user', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://************/*****/**/***********')
}
};
return userInfo;
}]);
home page(view)
<div class="users" ng-repeat="user in users | filter:userSearch" >
<a href="#/users/{{ user.id }}">
<img ng-src="{{user.img}}"/>
<span class="name">{{user.first}} </span>
<span class="name">{{user.last}} </span>
<p class="title">{{user.title}} </p>
<span class="date">{{user.date}} </span>
</a>
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, user, $http) {
if (!isConfirmed) {
user.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}
});
App.js
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/users';
}
});
index.html
<!doctype html>
<html ng-app="Portal">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<div class="container">
<h3>Portal</h3>
</div>
</div>
<div class="main">
<div class="container">
<div ng-view>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/UserController.js"></script>
<!-- Services -->
<script src="js/services/users.js"></script>
</body>
</html>

change your ng-repeat="user in users" to ng-repeat="user in userInfo"
as your assigning and consoling only $scope.userInfo in your controller

The property you assign data has to be same as of binded to view.
As per your HTML data should be in users. So do it like : $scope.users = response.data;.
or if you assign data to userInfo, then bind it on html. like :
<div class="users" ng-repeat="user in userInfo | filter:userSearch" >

Related

how to get data in ng dialog angularjs using http method?

Getting Data from database with php. Data is fine. Butt data is not showing in NgModel box. I have passed scope parameter in ngdialog function. Please help me out.
var adminapp = angular.module("uibootstrap", ["ngRoute", 'ngDialog']);
adminapp.controller("homedata", function($scope, $rootScope, $http, $httpParamSerializerJQLike, ngDialog, $timeout) {
$rootScope.theme = 'ngdialog-theme-default';
$scope.openDefault = function() {
ngDialog.open({
template: 'firstDialogId',
className: 'ngdialog-theme-default',
scope: $scope
})
};
// get user
$http.get('http://localhost/database/get-user.php').success(function(response) {
$scope.users = response;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<li ng-repeat="item in users">
<a href="javascript:void(0);" ng-click="openDefault()">
<div class="img"><img alt="" src="admin/images/user-img2.jpg"> <span class="status-red"></span></div>
<div class="msginfo">
{{item.user_name}} <br> <span>{{item.user_status}}</span>
</div>
</a>
<script type="text/ng-template" id="firstDialogId">
<div class="ngdialog-message">
<div class="data">
<div class="img">
<img alt="" src="http://localhost/rockeditor/admin/images/img-user.png"> <a class="editbtn" href="#"><i class="fa fa-edit"></i></a>
</div>
<div class="name">{{item.user_name}}</div>
<span class="editor">{{item.user_status}}</span>
<span class="email">{{item.user_email}}</span>
<input class="btn-green" type="submit" value="Save">
</div>
</div>
</script>
</li>
variable item is not available in your template firstDialogId, actually it's not a child node of <li></li>
You forget to include controller in your html.
Use ng-controller="homedata" on <li> element
item is not accessible in that script tag
$scope.users is available after $http call returned with success response
See here
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ngDialog.css" />
<link rel="stylesheet" href="ngDialog-theme-default.css" />
<script data-require="angular.js#*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="ngDialog.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="MyApp" ng-controller="homedata">
<button ng-click="clickme()">Hello World</button>
<script type="text/ng-template" id="firstDialogId">
<div ng-repeat="user in users">
<div>Current user:</div>
<div>{{user.name}}</div>
</div>
</script>
</body>
</html>
script.js
// Code goes here
angular.module("MyApp", ['ngDialog'])
.controller("homedata", homedata)
function Main($scope, ngDialog) {
$scope.users = [
{name: 'abc'},
{name: 'xyz'}
];
$scope.clickme = function() {
ngDialog.open({
template: 'firstDialogId',
className: 'ngdialog-theme-default',
scope: $scope
});
};
}
But as per your controller, There is a $http call and until it responded you don't have any data in $scope.users. So, please make sure that it and you only get data in your dialog after the $http is get success response

AngularJS ng-click stopped working suddenly

I am in the midst of troubleshooting a webpage that is able to open up a specific title from index.html to titleDetails.html.
However, ng-click in my index.html stopped working all of a sudden. I did not make any changes that could affect the link. It has been working fine all along (redirection of page from index.html to titleDetails.html) .
Original post here
Below are my codes:
app.js
(function () {
angular
.module("BlogApp", [])
.controller("BlogController", BlogController);
function BlogController($scope, $http) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post){
$scope.postDetail = post;
window.location = "/titleDetails.html";
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
You are missing $scope.titleDetails = titleDetails; in your controller.
Furthermore, I would recommend using controller as syntax.
So it would be something like this:
index.html
<div class="container" ng-controller="BlogController as blogCtrl">
...
<a ng-click="blogCtrl.titleDetails(post)">{{ blogCtrl.post.title }} </a>
your controller
function BlogController($scope, $http) {
var vm = this;
vm.titleDetails = titleDetails;
//rest of your code using 'vm' instead of '$scope'
This way, you can stop using $scope.
You can find more details here.

AngularJS ng-src not launching image

My app.js file
angular.module('bandApp', ['ngRoute', 'RouteControllers']);
angular.module('bandApp').config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'templates/home.html',
controller: 'HomeController'
});
});
For controller:
var myCtrl = angular.module('RouteControllers', []);
.controller('jtronController', function($scope) {
var jumbotronImage = {
bandRef: "/images/band.jpg"
};
$scope.jumbotronImage = bandRef;
});
For HTML
<!Doctype html>
<html ng-app="bandApp">
<head>
<meta charset="utf-8">
<title>Singing</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<!--script type="text/javascript" src="bower_components/a0-angular-storage/dist/angular-storage.min.js"></script>-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/">myBand</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div>
</nav>
<div ng-view>
<!--adds a jumbotron-->
<div ng-controller="jtronController">
<!--adds a jumbotron
<div class="container-full-bg" >-->
<img ng-src="{{jumbotronImage.bandRef}}" />
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</body>
</html>
Below is the list of error (I renamed 'theBand' to 'bandRef' as shown in Controller.js code but not sure why is still popping up:
ReferenceError: theBand is not defined
at new (controller.js:11)
at Object.invoke (angular.js:4839)
at Q.instance (angular.js:10692)
at p (angular.js:9569)
at g (angular.js:8878)
at p (angular.js:9632)
at g (angular.js:8878)
at angular.js:8743
at angular.js:9134
at d (angular.js:8921)
Correct the variable reference $scope.jumbotronImage = bandRef should be like below. It means you are assigning jumbotronImage reference to jumbotronImage scope variable to expose jumbotronImage value on view to make {{jumbotronImage.bandRef}} working.
var jumbotronImage = {
bandRef: "/images/band.jpg"
};
$scope.jumbotronImage = jumbotronImage;
You need to do:
$scope.jumbotronImage = jumbotronImage.bandRef;
And then on the HTML:
<img ng-src="{{jumbotronImage}}" />
OR the other way would be:
$scope.jumbotronImage = jumbotronImage;
Then in the HTML:
<img ng-src="{{jumbotronImage.bandRef}}" />
you are given wrong reference $scope.jumbotronImage = bandRef; there is no variable like bandRef. refer this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
var myCtrl = angular.module('RouteControllers', []);
.controller('jtronController', function($scope) {
var jumbotronImage = {
bandRef: "/images/band.jpg"
};
$scope.jumbotronImage = jumbotronImage; // this is correct way
});
$scope.jumbotronImage = function(){
bandRef: "/images/band.jpg"
};
Try it once its working fine.

Uncaught ReferenceError: app is not defined in controller, module, and route

Trying to make a crud app with ionic. But when I run my app, it can't show data. The error is:
Uncaught ReferenceError: app is not defined
at http://localhost:8100/controller/controller.js:1:1
Uncaught ReferenceError: app is not defined
at http://localhost:8100/controller/edit.js:1:1
Uncaught ReferenceError: app is not defined
at http://localhost:8100/js/route.js:1:1
Uncaught Error: [$injector:modulerr] Failed to instantiate module
myAPP due to:(…)
Can anyone help me please?
index :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myAPP">
<ion-pane>
<ion-header-bar class="bar-stable">
</ion-header-bar>
<ion-content>
<div class="tabs-striped tabs-top">
<div class="tabs">
<a class="tab-item" href="#/">List</a>
<a class="tab-item" href="#/addData">Add Data</a>
<a class="tab-item" href="#/editData">Edit Data</a>
</div>
</ion-content>
<div class="container">
<h2>{{title}}</h2>
</br>
</br>
<table class="table table-striped" ng-init="getData()">
<tr>
<th>NO</th>
<th>Nama</th>
<th>Alamat</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in dataList">
<td>{{$index+1}}</td>
<td>{{x.nama}}</td>
<td>{{x.alamat}}</td>
<td>
<button type="button" class="btn btn-info" ng-click="edit(x.id)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="delete(x.id)">Delete</button>
</td>
</tr>
</table>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="controller/controller.js"></script>
<script src="controller/edit.js"></script>
<script src="js/route.js"></script>
</ion-pane>
</body>
</html>
controller :
app.controller("controller",['$scope','$http', function($scope,$http){
console.log('hello world');
$scope.title = 'Data List';
$scope.action = "add";
$scope.listData = {};
$scope.dataList;
$scope.getData = function(){
$http.get(
'/data/getdata.php'
).success(function(data){
$scope.dataList = data;
});
};
$scope.delete = function(id){
$http.post(
'/data/delete.php',
{
id:id
}
).success(function(){
$scope.getData();
}).error(function(){
alert("Gagal");
});
};
$scope.add = function(){
$http.post(
'/data/add.php',
{
data: $scope.listData
}
).success(function(data){
//alert(data);
$scope.action = "add";
$scope.getData();
window.location.href = 'index.html';
}).error(function(){
alert("Gagal menyimpan data");
});
};
$scope.edit = function(index){
//var index = getSelectedIndex($index);
window.location.href = '#/editData/'+index;
// $scope.listData.nama = $scope.dataList[index].nama;
// $scope.listData.alamat = $scope.dataList[index].alamat;
}
function getSelectedIndex($index){
for (var i = 0; i < $scope.listData.length; i++) {
if($scope.listData[i].index===index);
return i;
}
return -1;
}
}]);
route :
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl : '/pages/list.html',
controller : 'controller'
})
.when('/addData',{
templateUrl : '/pages/addData.html',
controller : 'controller'
})
.when('/editData/:id',{
templateUrl : '/pages/update.html',
controller : 'controllerEdit'
})
.otherwise({
redirectTo : '/'
});
}]);
module :
var app = angular.module('myAPP', ['ionic'],['ngRoute'])
i think missing ng-controller="myctrlname" directive inside of html.
<body ng-app="myAPP" ng-controller="myctrlname">
Your module declaration is wrong. It should be like this
angular.module('myAPP', ['ionic','ngRoute'])
The variable named app will not exist unless you create it. Once the module has been created in your module file, you can retrieve it at the top of your other files like this:
var app = angular.module('myAPP');
I faced same problem
then
Only removed 'starter.controllers'
var app = angular.module('starter', ['ionic', 'starter.controllers']);
replace with
var app = angular.module('starter', ['ionic']);

How to call another javascript needed in a partial view in angularjs?

Here is the code for the partial view?
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Record Incident <small>Please enter important information in the audio...</small></h1>
<ol class="breadcrumb">
<li>
<h1> {{instruction}} </h1>
</li>
</ol>
</div>
</div>
Input something in the input box:
Submit
Here is the main index page
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Angular JS Library import -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<i class="fa fa-home"></i> Home
</li>
<li>
<i class="fa fa-shield"></i> About
</li>
<li>
<i class="fa fa-comment"></i> Contact
</li>
<li>
<i class="fa fa-comment"></i> Tutorials
</li>
<li>
<i class="fa fa-comment"></i> Demo Writer
</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view>
</div>
</div>
<footer class="text-center">
</footer>
</body>
This is the app.js code
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the tutorial page
.when('/tutorial', {
templateUrl : 'partials/tutorial.html',
controller : 'tutorialController'
})
.when('/demoWriter', {
templateUrl : 'demoWriter.html',
controller : 'demoWriterController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
scotchApp.controller('tutorialController', function($scope) {
$scope.instruction = 'This is the tutorial page.';
// Load the Google Transliterate API
});
scotchApp.controller('demoWriterController', function($scope) {
$scope.instruction = 'This is the tutorial page.';
});
The problem is that even though the expected view is partially viewed in the expected ng-view section, even after loading I want to call some javascript code. And I want to know, how to include those javascript code in the project. And how to call the javascript so that it will do the expected task. I want to convert the typed text in the tutorial partial view to sinhala. For that here is the expected javascript code...
<script type="text/javascript">
// Load the Google Transliterate API
google.load("elements", "1", {
packages : "transliteration"
});
function onLoad() {
var options = {
sourceLanguage : google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage : [google.elements.transliteration.LanguageCode.SINHALESE],
shortcutKey : 'ctrl+g',
transliterationEnabled : true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
In addition to this I have to include this script too
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Can anyone please explain me, where and how I should load the expected javascript code that has to be in that partial view which is called by the tutorialController in the app.js. Please explain me how to complete this task.
Use and ng-init to call a function on the target element. Asuming a textarea needs to be added to transliteration scope.
<textarea
ng-init="addTrnsEngine()"
id="tweet"
class="form-control primaryPostArea"
ng-model="newPost.text"
placeholder="Say something...">
</textarea>
where addTrnsEngine() is a function which adds the element to the google transliterate api.
you could send a send a unique id like in the example above or the tagName and search the document by the corresponding id or tagName. ( addTrnsEngine('tweet') )
example:
var addTrnsEngine() = function( targetId ){
var elem = document.getElementById( targetId );
//add transliteration on elem here.
}

Categories