Updating ng-repeat angularJS with mysqli connection

59 views Asked by At

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();
});
};

});
0

There are 0 answers