如何在AngularJs中编写收集ng-click事件的数组？

Question

我正在处理一个项目，我需要从用户那里收集多个项目并将其发送到服务器。我的视图中有一个列表，用户可以在其中单击并 select 项目。我的 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>

我使用了锚标签，用户可以点击，同时我希望将点击的项目（也有唯一的 ID）收集在一个数组或变量中，我需要发送（这些 selected 项目）通过表单提交到服务器。

这是我的控制器的样子，

JavaScript 控制器

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

我想要的是点击的子主题 ID 收集在一个数组 "topicIds : []" 中，我可以成功发送上面提到的 POST 请求。 searchService 是一项 Angular 服务，它有助于从服务器获取主题以及 POST 用户向服务器输入内容。

这就是我的 JSON 的样子，

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            
          },    
          ...
       ]
   },
   ...
  ]
}

如何编写通过 ng-click 事件收集 ID 的函数或数组？

提前致谢。

Answer 1

无需使用 $event，只需在 ng-click 中传递 subTopic.id 或其他任何内容，例如 ng-click="searchCtrl.select(subTopic)"

然后在您的控制器中，您可以：

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

Answer 2

您可以像这样在 angular 中获取 ID。

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

这会将点击事件提供给 recordClick 方法，然后您可以在其中调用它的 target 属性（即调用它的 div）和将其推入数组。

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

Answer 3

我通过在 ng-click 中传递子主题 ID 作为参数解决了这个问题。根据要求，我还需要在用户单击时调用另一个事件，我将其作为第二个参数传递。所以，现在这两个事件都按我想要的方式通过单击 ng-click 进行。

这是我更新后的代码，

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>

这是我的控制器，

控制器

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

这就是它解决我的问题的方式。顺便说一句，谢谢 Tom 和 OceansOnPluto。

如何在AngularJs中编写收集ng-click事件的数组？

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

javascript

arrays

angularjs

angularjs-ng-click