Creating an array to store ng-click events in AngularJS is a common task for developers. Here's

Question

Creating an array to store ng-click events in AngularJS is a common task for developers. Here's

I have a project where I'm tasked with collecting multiple user-selected items and sending them to the server. On my view, there's a list that users can click to select items. Here's a snippet of my HTML:

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>

The anchor tag allows users to click on items, while also giving each item a unique ID for collection in an array or variable. This collection will be sent to the server via form submission.

This is what 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

The goal is to collect the clicked subTopics IDs in an Array "topicIds : []" so that the POST request mentioned above can be successfully sent. The searchService is an Angular service used to fetch topics from the server and handle POST requests.

This is how my JSON data is structured:

JSON API

{  
   "TopicList" :[  
   {
      "id": "798790fa-78c8-4f00-8179-9e70f40adb14",  
      "name": "Topic1",  
      "number": 1.0,  
      "subTopics": [              
         
       ]      
   },
   ...
  ]
}

How can I create a function or array that collects the IDs through an ng-click event?

Thank you in advance.

javascript arrays angularjs angularjs-ng-click

Answer 1

Answer №1

Avoid using the $event in your code, simply pass the subTopic.id or similar parameter in your ng-click event like this:

ng-click="searchCtrl.select(subTopic)"

In your controller, you can implement the following logic:

angular.module('myApp').controller("searchController", function($log, searchService, $scope){
    var self = this;
    var subTopicIds = []; // an array to store 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 previously created object
            };
    ...

Answer 2

Avoid using the $event in your code, simply pass the subTopic.id or similar parameter in your ng-click event like this:

ng-click="searchCtrl.select(subTopic)"

In your controller, you can implement the following logic:

angular.module('myApp').controller("searchController", function($log, searchService, $scope){
    var self = this;
    var subTopicIds = []; // an array to store 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 previously created object
            };
    ...

Answer 3

Answer №2

To obtain an ID within angular, you can use the following method:

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

This code snippet will pass the click event to the recordClick function. From there, you can access its target property (which refers to the specific div that triggered the click) and add it to an array.

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

Answer 4

To obtain an ID within angular, you can use the following method:

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

This code snippet will pass the click event to the recordClick function. From there, you can access its target property (which refers to the specific div that triggered the click) and add it to an array.

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

Answer 5

Answer №3

I managed to resolve this issue by including the subTopics ID in the ng-click function as a parameter. Additionally, I needed to trigger another event upon user click, which I passed as a second argument. As a result, both events now function as intended with a single ng-click.

Below is the updated code snippet:

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 the corresponding controller code:

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');  
        console.log(TopicIDs);
    }    

self.initializeSearch = function(){

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

This approach successfully addressed my concern. Many thanks to Tom and OceansOnPluto for their insights.

Answer 6

I managed to resolve this issue by including the subTopics ID in the ng-click function as a parameter. Additionally, I needed to trigger another event upon user click, which I passed as a second argument. As a result, both events now function as intended with a single ng-click.

Below is the updated code snippet:

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 the corresponding controller code:

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');  
        console.log(TopicIDs);
    }    

self.initializeSearch = function(){

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

This approach successfully addressed my concern. Many thanks to Tom and OceansOnPluto for their insights.

Creating an array to store ng-click events in AngularJS is a common task for developers. Here's

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing my For Each loop to overlook certain items within my array?

Leveraging Arrays with AJAX Promises

Preventing navigation without using the <Prompt> component in React Router DOM V6

Enhance your list functionality in AngularJS by using the track by expression feature, which allows for easy

The AJAX call to retrieve data from a file dynamically is experiencing issues

Show me a list of all the commands my bot has in discord.js

What is causing the issue of the div not being removed from the label renderer in three.js

What is the proper way to utilize "three.module.js"?

AngularJS - developing a unique directive with customized attributes embedded in the templateUrl

Angular JS not displaying texts properly

Creating an asynchronous function in Node.js that returns a promise, but experiencing unexpected behavior when using console.log to display the result

Updating jQuery event behaviors based on the value of .html( 'string' )

Display and conceal individual divs using jQuery

Running different AngularJS applications on a single webpage

How can I effectively develop a versatile user interface for a website using Ruby on Rails that is compatible with all

I've managed to mess up my code again; local storage was working fine, and now it's not. I'm completely clueless

Create a folder in jsTree - the folder is generated before the user enters a name for it

An old-school Ajax request abruptly interrupted halfway through

When the response is manually terminated, the next middleware layer in express.js is invoked

Data Mishmash Generated by the 'littlest' and 'largest' Functions