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.

Answer 1

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.

Answer 2

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

Answer 3

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
            };
    ...