保存点击的方法

Question

如何在控制器的方法中保存ng单击的标题？

<div ng-click="selectItem(dimension, $event)">
    <span text="{{dimension.title}}" title="{{dimension.title}}">Item 1</span>
</div>
<div ng-click="selectItem(dimension, $event)">
    <span text="{{dimension.title}}" title="{{dimension.title}}">Item 2</span>
</div>
<div ng-click="selectItem(dimension, $event)">
    <span text="{{dimension.title}}" title="{{dimension.title}}">Item 3</span>
</div>

我正在编辑qlikSense扩展程序，需要将选择保存在应用程序中。

Answer 1

一个更好的主意是使用唯一的标识符而不是可以重复的标题来标识对象。如果dimension对象具有ID（或其他唯一值），请使用它。

根据您的需要调整以下代码：

var app = angular.module("myModule", []); 
app.controller("myCtrl", function($scope) {
    var vm = this;
    
    vm.dimensions = [
      {
        title: 'Title 1'
      },{
        title: 'Title 2'
      },{
        title: 'Title 3'
      },{
        title: 'Title 4'
      },{
        title: 'Title 5'
      },{
        title: 'Title 6'
      },
    ];
    
    vm.selected = [];
    
    vm.selectItem = function(item, event) {
      if(!vm.isSelected(item)) {
        vm.addItem(item);        
      } else {
        vm.removeItem(item);
      }
      
      // Show selected list
      console.log(vm.selected);
    }
    
    vm.isSelected = function(item) {
      return vm.selected.indexOf(item.title) != -1;
    }
    
    vm.addItem = function(item) {
      vm.selected.push(item.title);
    }
    
    vm.removeItem = function(item) {
      var index = vm.selected.indexOf(item.title);
      vm.selected.splice(index, 1);    
    }
});

.element {

  margin: 20px;
  line-height: 10px;
  border-bottom: 1px solid black;
  cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myModule">
  <div ng-controller="myCtrl as ctrl">
    <div ng-repeat="dimension in ctrl.dimensions" ng-click="ctrl.selectItem(dimension, $event)">
        <span text="{{dimension.title}}" title="{{dimension.title}}" class="element">
          {{ dimension.title }} 
          <span ng-if="ctrl.isSelected(dimension)">- checked</span>
        </span>
    </div>
  </div>
</div>