如何在Angularjs中获取选中的复选框值？

Question

我有带有模型的移动品牌。 在这里，当我提交时，我只会得到模型名称。 取而代之的是，我需要选择品牌名称和型号名称并输入价格。 我已经制定了这样的架构。

我怎样才能这样输出数据

Categories :

nokia

sub Categories :Nokia Lumia 730 -7,000,
                Nokia 225 -5,000,
                Nokia Lumia 1020 -6,000,
                Nokia Lumia 530 -8,0000

Samsung
sub Categories:
                Samsung Galaxy A7 -10,000,
                Samsung Galaxy A3 -12,000,
                Samsung Galaxy One5 -5,000,
                Samsung Galaxy S5 Neo -6,000

HTC
sub Categories:

                HTC One M9s -9,000,
                HTC Desire 728G -12,000,
                HTC Desire 526 -4,000,

我的代码：

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope) { $scope.selectedBrands = []; $scope.selectBrand = function(selectedPhone) { console.log(selectedPhone); // If we deselect the brand if ($scope.selectedBrands.indexOf(selectedPhone.brandname) === -1) { // Deselect all phones of that brand angular.forEach($scope.phones, function(phone) { if (phone.brandname === selectedPhone.brandname) { phone.selected = false; } }); } } $scope.checkSelectedPhones = function() { var modelNames = []; angular.forEach($scope.phones, function(phone) { if (phone.selected) { modelNames.push(phone.modelname); } }); console.log(modelNames); console.log(modelNames.length ? modelNames.join(', ') : 'No phones selected!'); } $scope.phones = [{ id: "986745", brandname: "Nokia", modelname: "Lumia 735 TS" }, { id: "896785", brandname: "Nokia", modelname: "Nokia Asha 230" }, { id: "546785", brandname: "Nokia", modelname: "Lumia 510" }, { id: "144745", brandname: "Samsung", modelname: "Galaxy Trend 840" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note 4 Duos" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note Duos" }, { id: "232980", brandname: "Htc", modelname: "Htc One X9" }, { id: "456798", brandname: "Htc", modelname: "Desire 820" }, { id: "656798", brandname: "Htc", modelname: "Desire 810S" }]; }); myApp.filter('unique', function() { return function(collection, keyname) { var output = [], keys = []; angular.forEach(collection, function(item) { var key = item[keyname]; if(keys.indexOf(key) === -1) { keys.push(key); output.push(item); } }); return output; }; }); //]] 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 

 <div ng-controller="MyCtrl"> <button ng-click="checkSelectedPhones()"> Check selected phones </button> <div ng-repeat="phone in phones | unique:'brandname'"> <label> <input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)"> {{phone.brandname}} </label> </div> <br> <div ng-repeat="brand in selectedBrands track by $index" ng-if="brand"> {{brand}} <div ng-repeat="phone in phones" ng-if="phone.brandname === brand"> <label> <input type="checkbox" ng-model="phone.selected"> {{phone.modelname}} <input type="text" ng-model="price"> </label> </div> </div> </div> 

我的小提琴： 演示

我需要这样的输出数据。

Answer 1

工作演示

<div ng-repeat="brand in selectedBrands track by $index" ng-if="brand">
    {{brand}}
    <div ng-repeat="phone in phones" ng-if="phone.brandname === brand">
      <label>
        <input type="checkbox" ng-model="phone.selected">  
        {{phone.modelname}}
        <input type="text" ng-model="phone.price"> <!-- Added new property to the model phone -->
      </label>
    </div>
  </div>

并将您的checkSelectedPhone函数更新为

$scope.checkSelectedPhones = function() {
    var modelNames = [];
    var aletrMsg= '';
    angular.forEach($scope.phones, function(phone) {
        if (phone.selected) {
        modelNames.push(phone);
        aletrMsg += 'Brand : '+ phone.brandname + 'Phone Name: '+ phone.modelname + ' : Price: '+ phone.price +', ';
      }
    });
    alert(modelNames.length ? aletrMsg : 'No phones selected!');
  }