how can I show a div and perform a task on ng-click Angular JS?

Question

I have a list of users in a page and a form in which I edit the details of those users. the form is hidden, I want to display the form when I click on edit button and also perform the task to edit it

html:




    
        
        
            List of Users 
        
        
            
                
                    
                        ID.
                        Name
                        Address
                        Email
                        Phone No.
                        
                    
                
                
                    
                        
                        
                        
                        
                        
                        
                            
                            
                        
                    
                
            
        
    




    
        
            User Registration Form 
        
        
            
                
                    


                    
                        
                            Name
                            
                                
                                
                                    This is a
                                        required field Minimum
                                        length required is 3 This
                                        field is invalid 
                                
                            
                        
                    


                    
                        
                            Address
                            
                                
                            
                        
                    


                    
                        
                            Email
                            
                                
                                
                                    This is a
                                        required field This
                                        field is invalid 
                                
                            
                        
                    


                    
                        
                            Phone
                                No.:
                            
                                
                                
                                    This is a
                                        required field Minimum
                                        length required is 7 This
                                        phone number is invalid

User Controller.js:

'use strict';

angular.module('myApp').controller('UserController', ['$scope',   'UserService', function($scope, UserService) {
var self = this;
self.user={id:null,username:'',address:'',email:'',phone:''};
self.users=[];

self.submit = submit;
self.edit = edit;
self.remove = remove;
self.reset = reset;



fetchAllUsers();

function fetchAllUsers(){
    UserService.fetchAllUsers()
        .then(
        function(d) {
            self.users = d;
        },
        function(errResponse){
            console.error('Error while fetching Users');
        }
    );
}

function createUser(user){
    UserService.createUser(user)
        .then(
        fetchAllUsers,
        function(errResponse){
            console.error('Error while creating User');
        }
    );
}

function updateUser(user, id){
    UserService.updateUser(user, id)
        .then(
        fetchAllUsers,
        function(errResponse){
            console.error('Error while updating User');
        }
    );
}

function deleteUser(id){
    UserService.deleteUser(id)
        .then(
        fetchAllUsers,
        function(errResponse){
            console.error('Error while deleting User');
        }
    );
}

function submit() {
    if(self.user.id===null){
        console.log('Saving New User', self.user);
        createUser(self.user);
    }else{
        updateUser(self.user, self.user.id);
        console.log('User updated with id ', self.user.id);
    }
    reset();
}

function edit(id){
    console.log('id to be edited', id);
    for(var i = 0; i < self.users.length; i++){
        if(self.users[i].id === id) {
            self.user = angular.copy(self.users[i]);
            break;
        }
    }
}

function remove(id){
    console.log('id to be deleted', id);
    if(self.user.id === id) {//clean form if the user to be deleted is shown there.
        reset();
    }
    deleteUser(id);
}


function reset(){
    self.user={id:null,username:'',address:'',email:'',phone:''};
    $scope.myForm.$setPristine(); //reset Form
}

}]);

UserService.js

'use strict';

 angular.module('myApp').factory('UserService', ['$http', '$q', function($http, $q){

var REST_SERVICE_URI = 'http://localhost:8080/Spring4MVCAngularJSExample/user/';

var factory = {
    fetchAllUsers: fetchAllUsers,
    createUser: createUser,
    updateUser:updateUser,
    deleteUser:deleteUser
};

return factory;

function fetchAllUsers() {
    var deferred = $q.defer();
    $http.get(REST_SERVICE_URI)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.error('Error while fetching Users');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}

function createUser(user) {
    var deferred = $q.defer();
    $http.post(REST_SERVICE_URI, user)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.error('Error while creating User');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}


function updateUser(user, id) {
    var deferred = $q.defer();
    $http.put(REST_SERVICE_URI+id, user)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.error('Error while updating User');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}

function deleteUser(id) {
    var deferred = $q.defer();
    $http.delete(REST_SERVICE_URI+id)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.error('Error while deleting User');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}

}]);

After when I click on the update button the div should hide too.

Abdellah Stands with Gaza · Accepted Answer

This can be done using ng-show directive. I see you are using it with the following code:

...

This would not be trigger angular.js' data-binding. Instead it will always be equal to the initial value: ng-show="false".

Solution

Create a variable in the controller and expose it to your view:

self.showForm = false;
//when you click on the edit button
self.showForm = true;

And in your html file ng-show="ctrl.showForm"

how can I show a div and perform a task on ng-click Angular JS?

Answers (1)

Related Questions