how to add item in array in angular js?

Question

I want to make two directives communicate. I have two directives: one is table directive, the other one is header directive. On header I have two buttons "add" and delete. I want to add an element in the list on click of add button, and delete the element when user clicks the delete button.

But the list is a different directive, how I can update the array after delete and add actions?

Here is my code.

.directive('tm',function(){
    return {
        restrict: 'E',
        templateUrl: 'login.html',
        scope: {
        },
        controller: 'f',
        controllerAs: 'vm'

    };
})

.controller('f',function($http, $scope){           
    var vm = this;
    $http.get('data.json').success(function(data){
      vm.data = data;
    })      
})

.controller('abc',function($http, $scope){

})

.directive('h',function(){
    return {
        restrict: 'E',
        templateUrl: 'header.html',
        scope: {
        },
        controller: 'he',
        controllerAs: 'h'

    };
})

.controller('he',function($http, $scope){
    var h =this;
    h.add=function(){
        alert('heelo')
    }

    h.delete=function(){
        alert('delete')
    }

})

I need user to push the default value ({name: 'abc', lastname: 'pqr'}) in the list when clicks the add button and it should update the list. When user clicks delete, it deletes the last element and updates the list.

Update plunker server is not running

I make fiddle https://jsfiddle.net/8fjhLqnw/

I need to add a item in list when add button is press..and delete an item when delete button is press

two solutions: 1) create a service who store the data. inject it in both controller. and edit / get the data from the service each time. the service is singleton 2) your directives don't have an isolated scope so they use the parent controller scope. create a variable in the parent controller scope and use it in both directives — AlainIb
– AlainIb, Commented Dec 22, 2015 at 8:21
gudy ..I added in plunker ..plunker server is down ..so I am trying to make fiddle — user944513
– user944513, Commented Dec 22, 2015 at 8:25

Aᴍɪʀ · Accepted Answer · 2015-12-22 15:21:13Z

3

First create service to share data and functions like this:

service('sharedData', function(){
    var vm = this;
    vm.list = [];
    vm.add=function(item){
        vm.list.push(item);
    }

    vm.get = function(){
        $http.get('data.json').success(function(data){
            vm.data = data;
        })
    }
    vm.delete=function(item){
        // use slice for delete object from list
    }
})

then you must inject this service in your directives:

controller('he', function($http, $scope, sharedData)

and use sharedData in your functions:

h.add=function(item){
    sharedData.add(item)
}

Here is code

edited Dec 22, 2015 at 15:21

Aᴍɪʀ

7,8133 gold badges40 silver badges54 bronze badges

answered Dec 22, 2015 at 8:44

Artin Hassan Falahi

1,1715 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user944513 Over a year ago

it automatically reflect ?

Artin Hassan Falahi Over a year ago

I provided u. Just add was implemented. You can implement delete as easy as abc.

Collectives™ on Stack Overflow

how to add item in array in angular js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related