如何知道在角度js

时间:2015-05-31 13:48:24

标签: angularjs angularjs-directive angularjs-scope ionic-framework ionic

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

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

2 个答案:

答案 0 :(得分:2)

您可以更改添加属性的模型:

B = {1, 2}
C = {3, 5, “banana"} 
D = {2, 3, 4}

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

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

您可以收听通过添加方法( itemChecked )传递项目的更改:

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

这是您修改后的plunker

如果你想限制支票:

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

答案 1 :(得分:1)

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

您需要添加&#34; value&#34;设置到您的数据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}}