如何使用Angular.js獲取多選數據並在列表的每個項目中添加復選框？

Question

我需要在每個項目中添加復選框並使用 Angular.js 獲取多選值。 我的代碼如下。

<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按鈕時選擇了多個項目，我需要獲取這些選定的數據。 我的控制器端代碼如下。

app.controller('speshController',function($scope,$http){
  $scope.data=[{
    'value':1,
    'name':'aaa'
  },{
    'value':2,
    'name':'bvc'
  },{
    'value':3,
    'name':'rtcv'
  },{
    'value':4,
    'name':'uytg'
  }
  ]
  $scope.listOfRestaurant=[];
  angular.forEach($scope.data,function(obj){
    var data={'name':obj.name,'value':obj.value};
        $scope.listOfRestaurant.push(data);
  })
  $scope.getValue=function(){

  }

})

我需要在控制台中顯示那些選定的數據。 我的完整代碼在這里。

Answer 1

多選的 ng-model 將為您提供所選項目作為數組

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

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

Answer 2

在我看來，最好使用帶有標簽的復選框而不是多選下拉列表。

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

您可以在Plunker 中進行測試。

如何使用Angular.js獲取多選數據並在列表的每個項目中添加復選框？

問題描述

2 個解決方案

解決方案1
0 2016-11-01 07:39:24

解決方案2
0 2016-11-01 10:24:44

如何使用Angular.js獲取多選數據並在列表的每個項目中添加復選框？

問題描述

2 個解決方案

解決方案1 0 2016-11-01 07:39:24

解決方案2 0 2016-11-01 10:24:44

解決方案1
0 2016-11-01 07:39:24

解決方案2
0 2016-11-01 10:24:44