如何使用Angular.js获取多选数据并在列表的每个项目中添加复选框?

时间:2016-11-01 07:24:16

标签: javascript angularjs

我需要在每个项目中添加复选框,并使用Angular.js获取多选的值。我在下面解释我的代码。

GhostscriptWrapper.GeneratePageThumb(inputFile, thumbnailPath, pageNo, width, height)

这里我有一个下拉列表,我需要在下拉列表中的每个项目之前添加复选框。假设用户在点击<body ng-controller="speshController"> <h1>Hello</h1> <div class="col-md-6"> <div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Child Business Name :</span> <select class="form-control" multiple="multiple" id="restau" ng-model="restaurant" ng-options="qua.name for qua in listOfRestaurant track by qua.value" ng-change="getDayFromSpecial('restau');"> </select> </div> </div> <button type="button" id="btn" ng-click="getValue();">GET</button> </body> 按钮时选择了多个项目,我需要获取这些选定的数据。我的控制器端代码如下所示。

GET

我需要在控制台中显示这些选定的数据。我的full code is here

2 个答案:

答案 0 :(得分:0)

ng-model on multi-select会将所选项目作为数组

 $scope.getValue=function(){
   console.log($scope.restaurant) 
 }

https://plnkr.co/edit/cqwbxRnQQAVrSm55nI6P?p=preview

答案 1 :(得分:0)

在我看来,最好使用带标签的复选框而不是多选下拉列表。

<label ng-repeat="qua in listOfRestaurant track by qua.value">
    <input type="checkbox" ng-model="qua.selected"/>
    {{qua.name}}
</label>

您可以在Plunker中进行测试。