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

Question

我有 Mobile 品牌和 Models。在这里，当我提交时，我只得到型号名称。相反，我需要选择品牌名称和型号名称并输入价格。我制作了这样的模式。

我怎样才能输出这样的数据

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>

我的 fiddle :demo

我需要像那样制作输出数据。

Answer 1

Working Demo

<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!');
  }