current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

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.

share|improve this question

3 Answers 3

up vote 2 down vote accepted

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
            };
    ...
share|improve this answer
    
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)...:( – Harsh Soni Jul 28 at 13:31
    
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! – cverb Aug 10 at 12:35
    
@cverb : hey, thanks for commenting. I have already solved this issue based on Tom's answer. – Harsh Soni Aug 12 at 13:06
    
@HarshSoni, if it solved the issue, you could mark it as accepted :) – Tom Aug 12 at 18:57
    
@Tom : done it. thanks btw...:) – Harsh Soni Aug 13 at 12:25
up vote 0 down vote

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);
}
share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.