如何知道在angular js中选择了哪个元素 [英] how to know which element is selected in angular js

问题描述

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

I make multiple selected popover , in which user can select multiple values . I want to print the all selected value on screen or get a object in which all element which is selected by user .I will explain in other words .In my demo I have one button on screen .On button click I open a pop over which have multiple selected element I want to get all element which is selected by user in pop up please check my demo .here is my demo

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

推荐答案

您可以通过添加属性来更改模型:

You can change your model adding a property:

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

您的列表会将属性附加到元素 (ng-model):

Your list will have the property attached to the element (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) 来监听更改:

and you can listen to the changes adding a method (itemChecked) passing your item:

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

这篇关于如何知道在angular js中选择了哪个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！