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
Related
I have a nested JSON file that has a few products in it. I'm trying to build a product selection tool. See the JSON file here: http://www.mocky.io/v2/5b1f5423310000570023077f
What I'm trying to do is "drill down" or show all the options for each of the products when clicked. So each product has 2 variations. Item 1 has 2 options. Item 2 has 3 options. I just want to show each of the respective items options when I click on their names.
Here's a demo of what I have so far: https://plnkr.co/edit/kZsOjjFaEZDKCGGiBYFS?p=preview
HTML:
<body ng-app="rac" ng-controller="prodCtrl">
<div class="row">
<div class="container">
<div ng-controller="prodCtrl">
<h3>Please choose a product</h3>
<ul>
<li ng-repeat="product in products">
<a href ng-click='setSelectedProduct(product)'>{{product.name}}</a>
</li>
</li>
</ul>
<!-- This section will automatically display detail when selectedProduct is updated -->
<div class="detail">
<div class="detailimagewrapper">
<ul>
<li ng-repeat="product in setSelectedProduct(product)">
<a href ng-click='setSelectedProduct(product)'>
{{product.name}}</a></li>
</li>
</ul>
<img class="detailimage" src="{{product.image}}" >
</div>
<p>{{selectedProduct.description}}</p>
Order Now
</div>
</div>
</div>
</div>
Here's my JS:
var rac = angular.module('rac', ['angular.filter']);
rac.controller('prodCtrl', function($scope, $http, $sce, $filter) {
$http.jsonp($sce.trustAsResourceUrl(
"http://www.mocky.io/v2/5b1f5423310000570023077f"), {
jsonpCallbackParam: 'callback'
})
.then(function(data) {
$scope.products = data.data.products;
},
function(error) {});
$scope.setSelectedProduct = function($scope) {
console.log($scope);
if ($scope.options.image) {
$scope.selectedProductImage = product.options.image;
}
};
});
It's slightly messy, but I think what you want is nested ng-repeat, that access the data after one product was selected. I decided not to make it pretty and just pull it out as is. For that I used two ng-repeat, one for selected options, the other is for the key and values of the objects.
Here is a demo:
var rac = angular.module('rac', ['angular.filter']);
rac.controller('prodCtrl', function($scope, $http, $sce, $filter) {
$http.jsonp($sce.trustAsResourceUrl("https://www.mocky.io/v2/5b1f5423310000570023077f"), {
jsonpCallbackParam: 'callback'
})
.then(function(data) {
$scope.products = data.data.products;
},
function(error) {}
);
$scope.selected = null;
$scope.setSelectedProduct = function(product) {
$scope.selected = product;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.js"></script>
</head>
<body ng-app="rac" ng-controller="prodCtrl">
<div class="row">
<div class="container">
<div ng-controller="prodCtrl">
<h3>Please choose a product</h3>
<ul>
<li ng-repeat="product in products">
<a href ng-click='setSelectedProduct(product)'>
{{product.name}}
</a>
</li>
</ul>
<hr>
<!-- This section will automatically display detail when selectedProduct is updated -->
<div class="detail">
<div class="detailimagewrapper">
<ul ng-repeat="s in selected.options">
<li ng-repeat="(key, value) in s">
<!-- Make this as pretty as you want -->
<span ng-if="key!='image'">{{key}}: {{value}}</span>
<span ng-if="key=='image'"><img style="width:100px" ng-src="{{value}}"></span>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
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" >
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.
I've ben struggling with this for days, I can't see where is wrong. Thing is I've set up a angularjs web with routing and controllers but the controllers are showing the data empty in the views, but in the console I can see the $scope output with the corect data throught a console.log($scope). Here is the code
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-md5/angular-md5.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
/script><sctipt src="http://getbootstrap.com/dist/js/bootstrap.min.js">
/sctipt><script src="js/main.js"></script>
</head>
<body ng-app='app'>
<div ng-view></div>
</body>
</html>
login.html
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<p class="form-title">
{{signin}}</p>
<form class="login">
<input type="text" ng-placeholder="{{user}}" required/>
<input type="password" ng-placeholder="{{password}}" required/>
<input type="submit" value="{{signin}}" class="btn btn-success btn-sm" />
<div class="remember-forgot">
<div class="row">
<div class="col-md-5">
<div class="checkbox">
<label>
<input type="checkbox" />
{{rememberme}}
</label>
</div>
</div>
<div class="col-md-7 forgot-pass-content">
{{forgotpassword}}}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
main.js
var app=angular.module('app',['ngRoute']);
app.config(['$locationProvider','$routeProvider',function ($locationProvider,$routeProvider){
$routeProvider.
when('/login',{
templateUrl:'html/login.html',
controller:'loginController'
}).
when('/home',{
templateUrl:'html/home.html',
controller:'homeController'
}).
otherwise({
redirectTo:'/login'
});
}]);
app.run(function($rootScope){
$rootScope.urlapi='http://freecalendar.desirnet.com/api/api.php';
});
app.controller('loginController',function($scope,$rootScope,$location){
$scope={
'singin':'Iniciar sesión',
'user':'Usuario',
'password':'Contraseña',
'rememberme':'Recuérdame',
'forgotpassword':'Recordar contraseña'
};
console.log($scope);
$scope.login=function(){
var data=$.param({
'user':$scope.txtuser,
'password':$scope.txtpassword
});
$http.post($rootScope.urlapi,data)
.then(function(response){
response=response.data;
console.log(response);
if(response.error!=undefined){
$scope.errorlogin="El usuario y/o contraseña no son correctos";
} else {
$location.path('/home')
}
});
}
});
app.controller('homeController',function($scope,$rootScope,$location){
});
I really don't know what I'nm doing wrong, I follow many routing tutorials, but nothing.
In the console there are no errors only the $scope output.
typographical error in these line of code:
/sctipt>
You are assigning a new value to the $scope parameter in your loginController function
$scope={
'singin':'Iniciar sesión',
'user':'Usuario',
'password':'Contraseña',
'rememberme':'Recuérdame',
'forgotpassword':'Recordar contraseña'
};
You need to understand that after that you loose the link to the actual scope Angular is using. Angular simply has no way of knowing what are you intentions in your controller.
Here is the piece of code that will do the trick:
Object.assign($scope, {
'singin':'Iniciar sesión',
'user':'Usuario',
'password':'Contraseña',
'rememberme':'Recuérdame',
'forgotpassword':'Recordar contraseña'
});
Notice that it simply adds a few properties to the $scope object therefore Angular can perfectly reflect changes from your controller in your view.
i'm learning AngularJs and i complete some courses in internet i know what is module, controller, service, i know some basics directives, and i found in internet a basic AngularJs video tutorial, i'm doing all like in this video but can't understand why it's not work.
Here is my code
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl">
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
It should insert new text in my array, but when i'm clikcking on the button nothing happens, and no error in console, i realy can't understand why?
The ng-click event is out of the controller's scope. The quick answer is to move ng-controller="todoCtrl" to an enclosing/outer element, which is body in this case.
Move the ng-controller attribute to the <body> - so that it incorporates the form and the ng-click event. For example:
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="todoApp">
<body ng-controller="todoCtrl">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
The model and functions should be in scope to be used, so you need to have addTodo function called within todoCtrl scope. Just add a wrapper and have the controller there.
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl" class="wrapper">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
<div>
</body>
</html>