如何知道在angular js中选择了哪个元素

Question

我制作了多个选定的弹出框，用户可以在其中选择多个值。我想在屏幕上打印所有选定的值或获取一个对象，其中包含用户选择的所有元素。我将用换句话说进行解释。在我的演示中，我在屏幕上有一个按钮。单击按钮时，我打开一个弹出窗口有多个选定的元素我想获取用户在弹出窗口中选择的所有元素请查看我的演示。这是我的演示

http://codepen.io/anon/pen/KpaejV

angular.module('ionicApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {
  $scope.data =[
    {"name":"A"},
    {"name":"B"},
    {"name":"C"},
    {"name":"D"},
    {"name":"E"}
  ]
  $ionicPopover.fromTemplateUrl('my-popover.html', {
    scope: $scope
  }).then(function(popover) {
    $scope.popover = popover;
  });


  $scope.openPopover = function($event) {
    $scope.popover.show($event);
  };

   $scope.closePopover = function() {
    $scope.popover.hide();
  };
}
)

Answer 1

您可以更改模型添加属性：

$scope.data =[
    {"name":"A", checked: false},
    {"name":"B", checked: false},
    {"name":"C", checked: false},
    {"name":"D", checked: false},
    {"name":"E", checked: false}
  ];

您的列表将具有附加到元素的属性（ng-model）：

<li class="item item-checkbox">
     <label class="checkbox">
       <input type="checkbox" ng-model="item.checked" ng-click="itemChecked(item)">
     </label>
     {{item.name}}
  </li>

您可以通过添加方法 (itemChecked) 来监听更改：

$scope.itemChecked = function(item)
  {
    alert(item.name);  
  }

这是你修改后的plunker。

如果你想限制检查：

$scope.itemChecked = function(item)
{
    var count = 0;
    angular.forEach($scope.data, function(value, key) {
      count += value.checked ? 1 : 0; 
    });
    if (count > 3)
    {
        item.checked = false;
    }
  }

Answer 2

在此处查看更新的代码：http://codepen.io/anon/pen/jPypNb

您需要将“value”设置添加到您的数据 JSON 列表中，并在单击时绑定每个复选框，将值绑定到它。

模型更新

  $scope.data =[
    {"name":"A", value:false},
    {"name":"B", value:false},
    {"name":"C", value:false},
    {"name":"D", value:false},
    {"name":"E", value:false}
  ]

HTML 更新

<label class="checkbox">
       <input type="checkbox" ng-model="item.value">
     </label>
     {{item.name}}