I am quite new with AngularJS so excuse me if I'm asking a stupid thing. I'm trying to create a task manager for events with AngularJS + Mysql + PHP.
The layout is separated in two columns. In the left column there's an overview of staff, loaded by function getUsers() in app.js. By clicking the + button after each staffname the user_id is being posted in a mysql database table. The results of this table is shown in the right column, function getEventUsers() in app.js. I'm trying to find out how to reload or update the right table after clicking the + button. The functions itself are working correctly (they get json_encoded results from the .php pages), but the right column is not updating itself only after pressing F5 after each click it is showing the correct result. So the right column, so function getEventUsers() in app.js, has to refresh/reload after clicking on the + button.
Template
ng-app="myApp" is in the html tag
ng-controller="usersController" is in the body tag
<div class="row">
<div class="container">
<blockquote><h1>Task Manager</h1></blockquote>
<div class="col-md-6">
<div class="widget-box" id="recent-box" ng-controller="usersController">
<div class="widget-header header-color-blue">
<div class="row">
<div class="col-sm-6">
<h4 class="bigger lighter">
<i class="glyphicon glyphicon-align-justify"></i>USERS
</h4>
</div>
<div class="col-sm-6">
<input type="text" ng-model="filterTask" class="form-control search header-elements-margin" placeholder="Filter Tasks">
</div>
</div></div>
<div class="widget-body ">
<div class="task">
<label class="checkbox" ng-repeat="user in users | filter : filterTask">
<input
type="checkbox"
value="{{user.active}}"
ng-checked="user.active==1"
ng-click="toggleStatus(user.id,user.active)"/>
<span ng-class="{strike:user.active==0}">{{user.firstname}} {{user.lastname}} [{{user.id}}]</span>
<a ng-click="addEventUser(user.id)" class="pull-right"><i class="glyphicon glyphicon-plus"></i></a>
</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="widget-box" id="recent-box" ng-controller="usersController">
<div class="widget-header header-color-blue">
<div class="row">
<div class="col-sm-6">
<h4 class="bigger lighter">
<i class="glyphicon glyphicon-align-justify"></i>EVENT MANAGER
</h4>
</div>
<div class="col-sm-6">
<input type="text" ng-model="filterTask" class="form-control search header-elements-margin" placeholder="Filter Tasks">
</div>
</div></div>
<div class="widget-body ">
<div class="task">
<label class="checkbox" ng-repeat="eventuser in eventusers | filter : filterTask">
<span ng-class="{strike:task.STATUS==2}">{{eventuser.firstname}} [{{eventuser.lastname}}]</span>
<a ng-click="deleteTask(eventuser.id)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
App.js
//Define an angular module for our app
var app = angular.module('myApp', []);
app.controller('usersController', function($scope, $http) {
getUsers(); // Load all available users
function getUsers(){
$http.post("ajax/getUsers.php").success(function(data){
$scope.users = data;
//alert(data);
});
};
getEventUsers(); // Load all available users for event
function getEventUsers(){
$http.post("ajax/getEventUsers.php").success(function(data){
$scope.eventusers = data;
//alert(data);
});
};
$scope.addEventUser = function (user_id) {
$http.post("ajax/addEventUser.php?userid="+user_id).success(function(data){
alert(getEventUsers());
});
};
$scope.toggleStatus = function(item, status) {
if(status=='1'){
active='0';
}else{
active='1';
}
$http.post("ajax/updateUsers.php?id="+item+"&active="+active).success(function(data){
getUsers();
});
};
});
Related
I am new to Angular and learning by implementing a chat application.
I am trying to pass the checkbox values to my JS code. Below are the snippets. The problem I am facing is I am unable to get the checked values in JS. I am getting i.value as undefined. Can you please point out where am i going wrong?
<div class="add-friends panel-primary panel" ng-show="addfriendsselected">
<div class="panel-heading text-center" >Add Friends</div>
<div class="panel_body">
<div class="row" id=myForm>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "user in friendslist">
<div>
{{user.firstName}}
{{user.email}}
<input type="checkbox" name="checkbox" value= "{{user}}">
</div>
</li>
<div ui-view></div>
</ul>
</div>
</div>
<form id=userForm ng-submit="createGroup()">
<input class="btn btn-default" type="submit" value="Create Group">
</form>
</div>
Controller
$scope.createGroup = function() {
console.log("Entered createGroup ");
$("input[type=checkbox]:checked").each(function(i){
console.log("i.value :"+i.value);
$scope.people.push( i.value );
});
console.log("$scope.people : " + JSON.stringify($scope.people));
}
Just add object property as ng-model to the checkbox
<input type="checkbox" name="checkbox" ng-model="user.check">
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.friendslist = [{"firstName":"sss","email":"ss#gmail.com"}]
$scope.createGroup = function() {
console.log($scope.friendslist)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="add-friends panel-primary panel" >
<div class="panel-heading text-center" >Add Friends</div>
<div class="panel_body">
<div class="row" id=myForm>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "user in friendslist">
<div>
{{user.firstName}}
{{user.email}}
<input type="checkbox" name="checkbox" ng-model="user.check">
</div>
</li>
<div ui-view></div>
</ul>
</div>
</div>
<form id=userForm ng-submit="createGroup()">
<input class="btn btn-default" type="submit" value="Create Group">
</form>
</div>
</div>
Suggest you use ngModel directive as shown in the Angular documentation for input[checkbox].
Also, it might be useful for you to create a separate component (or directive) for each li in friendslist.
Hope it helps. Good luck;)
I have a div with property information in india, if a user clicks on a button,
the page should be redirect on another page and my whole div should be copy
and open on another page
<div class="box2">
<div style="">
<img src="2.jpg" style="border: 2px solid #EEEEEE; height: 180px;" class="col-lg-6 col-md-6 col-sm-12 col-xs-12" />
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 select">
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:16px; font-weight:bold">{{i.A}}</span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:12px; font-weight:lighter">Available For <b>{{i.B}}</b> </span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Area <b>{{i.C}}</b> Security <b> Rs. {{i.F}}</b></span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Rental Unit In<b style="cursor:pointer"> {{i.D}}</b></span>
</div>
<br />
<div class="borderdiv">
<span ng-repeat="i in data" style="font-size:14px; font-weight:normal">
Features
<br />
<span class="glyphicon glyphicon-eject" style="margin-left:20px;"></span>
<span class="glyphicon glyphicon-chevron-left" style="margin-left:20px;"></span>
<span class="glyphicon glyphicon-chevron-right" style="margin-left:20px;"></span>
</span>
</div>
<br />
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">{{i.E}}</span>
</div>
</div>
</div>
this is my div
<button ng-click="click()">click to view data</button>
this is my button
what i need to do if i want to see the same data on other pages???
You need to create a server-side structural template which will generate the div. Example in PHP
function getViewData() {
?>
<button ng-click="click()">click to view data</button>
>?php
}
And you can add anywhere in your structure if you are using a PHP file like this:
<?php getViewData(); ?>
I will suggest you to go with a angular factory which contains the data that you are looking for and use the html template in the respective page.
Button code remains the same as
<button ng-click="click()">click to view data</button>
Create a new Angular Factory as below
angular.module('myApp').factory('appVariables',function(){
var data2=[];
return{
data2,data2
}
});
Your controller should contain the following click() method
angular.module('myApp').controller('appController',function($scope,appVariables){
$scope.click=function(){
appVariables.data2=$scope.data2;
}
})
Go to the another page inject appVariables as a dependecy to the controller and you can get the same data2 across your app.
This code is genric as the information provided by you is very less.
I have put together a sample for you. I can't create multiple html pages. So you have to put them in different files.
var app = angular.module('sample', []);]
//JS1
app.controller('page1Controller', ['$scope','$http','$rootScope', function($scope, $http){
$scope.page1 = {};
$scope.page1.title = "Page1";
$scope.click = function(page){
$rootScope.page = page;
}
}]);
//JS2
app.controller('page2Controller', ['$scope','$http','$rootScope', function($scope, $http){
$scope.init = function(){
alert("alrt")
$scope.page2 = $rootScope.page;
}
}]);
<div ng-app="sample">
<!--Page1-->
<div ng-controller="page1Controller">
<div>{{page1.title}}</div>
<button ng-click="click(page1)">click to view data</button>
</div>
<!--Page2-->
<div ng-app="sample">
<div ng-controller="page2Controller" ng-init="init()">
<div>{{page2.title}}</div>
</div>
I have some html like this (I won't even bother to post the JS since it's an overcomplicated mess):
<html>
<body>
<div class="container">
<h3 class="text-center">Administration</h3>
</div>
<div class="form-inline text-center">
<div class="form-group">
<label>Managing Business</label>
<select ng-options="business.name for business in businesses" ng-model="managingBusiness" class="form-control restaurant-select"></select>
<label>Program</label>
<select ng-options="program.description for program in selectablePrograms" ng-model="managingProgram" class="form-control restaurant-select"></select>
</div>
</div>
<hr/>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active: isActive('/admin/overview')}">Overview</li>
<li ng-class="{ active: isActive('/admin/generators')}">Generators</li>
</ul>
</div>
<div class="col-md-10">
<div ng-include="'views/partials/admin/overview.html'" ng-show="isActive('/admin/overview')"></div>
<div ng-include="'views/partials/admin/generators.html'" ng-show="isActive('/admin/generators')"></div>
</div>
</body>
</html>
And the only js that matters is this:
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
And the issue is that when the user selects a tab to change (overview/generators) than the entire page is reloaded. This is bad because I am trying to keep the state of the selected business at the top.
What am I doing wrong? Why is the page reloading without me running a reload command?
I am building a Reddit clone. So far you are able to add links, upvote/down vote, and comment/remove comments on the links posted. You must be logged in via Twitter to add comments or posts.
The big issue I am facing is whenever a post has comments, they do not show up if you reload the website. You must add a new comment to see comments which are already present. The next big issue is if you add a new post it will automatically inherit the comments from the previously commented on post even though these comments are not in the posts data on the Firebase Server.
If you comment on the new post it causes all the other post's comments to inherit the new comment on the new post.
Here is the source code.
<div>
<span>Currently Logged in as: {{authData.twitter.username}}</span>
<form>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Post Name</label>
<input type="text" ng-model="post.name" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Description</label>
<input type="text" ng-model="post.description" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">URL</label>
<input type="text" ng-model="post.url" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button ng-click="savePost(post)" class="form-control" style="margin-top: 25px">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div ng-repeat="post in posts">
<h2><a ng-href="{{post.url}}">{{post.name}}</a></h2>
<p>{{post.description}}</p>
<button ng-click="deletePost(post)" class="btn btn-danger">Delete Post</button>
<span>{{post.votes}}</span>
<button ng-click="addVote(post)" class="btn btn-primary">Up Vote</button>
<button ng-click="removeVote(post)" class="btn btn-primary">Down Vote</button>
<br>
<br>
<div class="panel panel-default" ng-repeat="comment in comments">
<div class="panel-body">
<a ng-href="https://twitter.com/{{comment.user}}">{{comment.user}}</a>
</div>
<div class="panel-footer">
{{comment.text}}
<br>
<button class="btn btn-danger" ng-click="removeComment(post, comment)">Remove Comment</button>
</div>
</div>
<form>
<div class="input-group">
<input ng-model="comment.text" class="form-control">
<div class="input-group-btn"><button ng-click="addComment(post, comment)" class="btn btn-success">Add Comment!</button></div>
</div>
</form>
</div>
<br>
<button class="btn btn-primary" ng-click="login()">Log in with Twitter</button>
<!--Starter Project for the Reddit Clone-->
<!doctype html>
<html ng-app="reddit-clone">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js">
</script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="app.js"></script>
<title>Reddit Clone</title>
</head>
<body style="width: 80%; margin: 0 auto">
<h1 class="text-center">Reddit Clone</h1>
<div ng-view></div>
</body>
</html>
Here is a picture of the database showing that the comment only exists for the first post.
Here is a picture showing how the comment is display on both posts even though it is only in one in the database.
You are storing only one comments array on your $scope.
Then in your template, you are looping over this one array for each post inside the ng-repeat on posts, hence it is the same for both posts. You need to loop over the comments that are specific to a post instead. Like so:
<div class="panel panel-default" ng-repeat="comment in post.comments">
Notice the post.comments.
I have the following HTML/JSP structure:
<div class="col-md-12 task task-box">
<c:if test="${not empty task.titulo}">
<div class="row">
<div class="col-md-12">
<h3 class="task-title">${task.titulo}</h3></div>
</div>
</c:if>
<div class="row">
<div class="col-md-12">
<pre class="task-descricao"><c:out value="${task.descricao}"/></pre>
</div>
</div>
<div class="row">
<div class="col-md-3">
<small class="task-data-criacao">
<i class="fa fa-calendar-o"></i> ${task.dataCriacao}</small>
</div>
<c:if test="${not empty task.dataExecucao}">
<div class="col-md-3">
<small class="task-execucao"><i
class="fa fa-calendar"></i> ${task.dataExecucao}</small>
</div>
</c:if>
<c:if test="${not empty task.arquivo}">
<div class="col-md-3">
<a href="${task.arquivo}" class="btn btn-link btn-sm">
<i class="fa fa-download"></i>
</a>
</div>
</c:if>
<div class="col-md-3"><i class="fa fa-dropbox"></i></div>
<div class="row">
<div class="container">
<div class="col-md-12">
<small class="task-tag"><i class="fa fa-tags"></i> ${task.tags}</small>
</div>
</div>
</div>
</div>
</div>
I will have multiple structures like this one since I'm using <c:forEach>. The wrapper class task.
How can I get the information such as, h3.task-title, pre.task-descricao and others when I click on a div.task with JQuery/JavaScript?
PS: I'm using <c:forEach> to multiply this structure with different inner values.
You can use the this keyword inside your event handler to access the element which triggered the event. Once you have this element, you can use the find function to find the relevant elements inside the target element.
$('div.task').click(function () {
var $title = $(this).find('h3.task-title');
var $descricao = $(this).find('pre.task-descricao');
//...
alert($title.text() + '\n' + $descricao.text());
});
Here is a live example.
using JQuery:
$( "#taskdiv" ).click(function() {
var title = $(".task-title").html();
var descricao = $(".task-descricao").html();
});
Info about jquery click:
http://api.jquery.com/click/
Infor about jquery selectors:
http://www.w3schools.com/Jquery/jquery_ref_selectors.asp