How to write array which collects ng-click event in AngularJs?

Question

I am working with a project, where I need to collect multiple items from user and send it to the server. There is list on my view, where user can click and select the items. My HTML looks like this,

HTML

<div ng-repeat="topicList in searchCtrl.topic">
    <div ng-repeat="topicTerm in topicList">
       <p>{{topicTerm.number}}&nbsp&nbsp{{topicTerm.name}}</p>
       <div ng-repeat="subTopic in topicTerm.subTopics">
          <a href="" ng-click="searchCtrl.select($event)">{{subTopic.number}}&nbsp&nbsp{{subTopic.name}}</a>
       </div>
    </div>
</div>

I have used anchor tag, there user can click and at the same time I want the clicked items (which have also unique ID) collected in an Array or variable, which I need to send (these selected items) to the server via form submission.

This is how my controller looks like,

JavaScript Controller

angular.module('myApp').controller("searchController", function($log, searchService, $scope){
    var self = this;

    self.initializeSearch = function(){

        self.searchEntry = 
            { 
            "contact":{     
                "person": "",      
                "organization": ""
            },  
            "request": {      
                "input": "",      
                "language": "en"
            },  
            "topicIds": []
            };

    // The POST request must looks like above

What I want is that the clicked subTopics IDs collects in an Array "topicIds : []" and I could successfully send the POST request mentioned above. The searchService is a Angular service which helps to get Topics from server and also to POST user input to the server.

This is how my JSON looks like,

JSON API

{  
   "TopicList" :[  
   {
      "id": "798790fa-78c8-4f00-8179-9e70f40adb14",  
      "name": "Topic1",  
      "number": 1.0,  
      "subTopics": [              
          {
             "id": "82c90f2e-deac-4fa4-80f4-d077edacc2dc",  
             "name": "data1.1",  
             "number": 1.1 
          },              
          {
             "id": "0f0c2b89-6dae-4f60-90f8-df49d96b9af9",  
             "name": "data1.2",  
             "number": 1.2
          },    
          {
             "id": "131b68b6-1f45-477f-9b0f-8ac80c5b4f4e",  
             "name": "data1.3",  
             "number": 1.3     
          },           
          {
             "id": "16c8f46d-d20c-48f9-a0c0-e3989763082b",  
             "name": "data1.4",  
             "number": 1.4    
          }   
       ]      
   },
   {
      "id": "9ed3fee0-5347-4f00-9b56-721b61439f88",  
      "name": "Topic2",  
      "number": 2.0,  
      "subTopics": [ 
          {
             "id": "eec13511-1408-4f4b-be6f-8b5a8b6ea28b",  
             "name": "data2.1",  
             "number": 2.1            
          },    
          ...
       ]
   },
   ...
  ]
}

How to write a function or array which collects the IDs via ng-click event?

Thanks in Advance.

Tom · Accepted Answer · 2015-07-28 13:10:05Z

2

No need to use an $event, simple pass the subTopic.id, or whatever, in your ng-click, like ng-click="searchCtrl.select(subTopic)"

And then in your controller, you could have:

angular.module('myApp').controller("searchController", function($log, searchService, $scope){
    var self = this;
    var subTopicIds = []; // array to hold subTopicIds

    self.select = function(subTopic) {
        subTopicIds.push(subTopic.id);
    }

    self.initializeSearch = function(){

        self.searchEntry = 
            { 
            "contact":{     
                "person": "",      
                "organization": ""
            },  
            "request": {      
                "input": "",      
                "language": "en"
            },  
            "topicIds": subTopicIds // use the object created previously
            };
    ...

answered Jul 28, 2015 at 13:10

Tom

7,7401 gold badge26 silver badges49 bronze badges

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

4 Comments

Harsh Soni Over a year ago

Hello Tom, Thank you for your answer. The $event is not for ID but i wrote this click event for changing color. (I mean when user click on subTopic then the background color will change) So, i think now i need to apply two expression in ng-click. I did the same what you have mentioned in my HTML and Controller code. But i got an error (Cannot read property 'id' of undefined)...:(

cverb Over a year ago

Add what you have tried in your question with an edit so it becomes clear for us, how to help you, because this is a good answer!

Harsh Soni Over a year ago

@cverb : hey, thanks for commenting. I have already solved this issue based on Tom's answer.

Harsh Soni Over a year ago

@Tom: I have another question for you. In this same project I am sending this POST request to the server and get response JSON object. I am showing that in my view via smart table. In this resulted JSON object I got the same id (which is shown above in JSON API) of data1.1 and onwards. But I have to show the name property of that id (which is not available in resulted JSON object). So, the question is, how can I access the property of another JSON object while working with resulted JSON? I hope that my explanation is understandable. looking forward to your answer...:)

whatoncewaslost · Accepted Answer · 2015-07-28 13:14:02Z

0

You can get an ID in angular like this.

<div ng-click="recordClick($event)">Click</div>

That will feed the click event into the recordClick method, where you can then call it's target property (i.e. the div it was invoked on) and push it in the array.

$scope.clickArray = [];
$scope.recordClick = function(event){
    clickArray.push(event.target);
}

answered Jul 28, 2015 at 13:14

whatoncewaslost

2,2562 gold badges20 silver badges26 bronze badges

Comments

Harsh Soni · Accepted Answer · 2015-08-10 11:15:13Z

I solved this problem by passing subTopics ID in ng-click as a parameter. And as per the requirement I need to call also another event while user click, which I passed as a second argument. So, now both the events works as I wanted via single ng-click.

Here is my updated code,

HTML

<div ng-repeat="topicList in searchCtrl.topic">
  <div ng-repeat="topicTerm in topicList">
    <p>{{topicTerm.number}}&nbsp&nbsp{{topicTerm.name}}</p>
    <div ng-repeat="subTopic in topicTerm.subTopics">
      <a href="" ng-click="searchCtrl.select(subTopic.id, $event)">{{subTopic.number}}&nbsp&nbsp{{subTopic.name}}</a>
    </div>
  </div>
</div>

And here is my controller,

Controller

angular.module('myApp').controller("searchController", function($log, searchService, $scope){
var self = this;
var subTopicIDs = [];

    self.select = function(TopicIDs, event){
        subTopicIDs.push(TopicIDs);
        $(event.target).addClass('selor');  // This is class which changes the background color of the clicked item
        console.log(TopicIDs);
    }    

self.initializeSearch = function(){

    self.searchEntry = 
        { 
        "contact":{     
            "person": "",      
            "organization": ""
        },  
        "request": {      
            "input": "",      
            "language": "en"
        },  
        "topicIds": subTopicIDs
        };

This is how it solved my problem. Btw, Thank you Tom and OceansOnPluto.

Collectives™ on Stack Overflow

How to write array which collects ng-click event in AngularJs?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related