198
rated 0 times
[
200]
[
2]
/ answers: 1 / hits: 21516
/ 9 Years ago, fri, january 22, 2016, 12:00:00
I have Mobile brand with Models. Here when I submit I am getting only model name. Instead of that, I need selected brand name and model name and entered price. I have made schema like this.
How can I make output data like this
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,
My Code:
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>My fiddle: demo
I need to make output data like that.
More From » jquery
