0

demo

Here i have added my code.i have two mobile brands and models with submodels

$scope.phones = [{
    id: "986745",
    brandname: "Nokia",
    modelname: "Lumia",
    "Submodel": [{
          "name": "Lumia 735 TS"
        }, {
          "name": "Lumia 510"
        }, {
          "name": "Lumia 830"
        }, {
          "name": "Lumia New"
        }]
  }, {
    id: "896785",
    brandname: "Nokia",
    modelname: "Asha",
    "Submodel": [{
          "name": "Asha 230"
        }, {
          "name": "Asha Asn01"
        }, {
          "name": "Nokia Asha Dual sim"
        }, {
          "name": "Asha 540"
        }]
  },  {
    id: "144745",
    brandname: "Samsung",
    modelname: "Galaxy ",
    "Submodel": [{
          "name": "Trend 840"
        }, {
          "name": "A5"
        }, {
          "name": "Note 4 Duos"
        }, {
          "name": "Galaxy Note Duos"
        },
        {
          "name": "Galaxy A5"
        }]
  }, {
    id: "986980",
    brandname: "Samsung",
    modelname: "Asha",
    "Submodel": [{
          "name": "Asha 230"
        }, {
          "name": "Asha Asn01"
        }, {
          "name": "Asha Dual sim"
        }, {
          "name": "Asha 540"
        }]
  },  
  ];

When i click Nokia checkbox. Lumia and Asha checkboxs coming .same thing working for Samsung also

My Expectation: When i click Nokia it should show

1.Lumia(checkbox)

2.Asha(checkbox)

here for example when i click Lumia it should show one more checkbox list with input text box(text box for enter mobile model price) 1.Lumia 735 TS(check box with user input textbox) 2.Lumia 510(check box with user input textbox) 3.Lumia 830(check box with user input textbox) 4.Lumia New(check box with user input textbox)

same this when choose Asha in Nokia or If i select Samsung Galaxy and Asha . when i submit controller i should get selected 1.brandname 2.modelname 3.Submodel 4.user entered value in that text box already i am getting brandname,modelname

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
	$scope.selectedBrands = [];
  
  $scope.selectBrand = function(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 = [];
    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!');
  }

	$scope.phones = [{
    id: "986745",
    brandname: "Nokia",
    modelname: "Lumia",
	"Submodel": [{
          "name": "Lumia 735 TS"
        }, {
          "name": "Lumia 510"
        }, {
          "name": "Lumia 830"
        }, {
          "name": "Lumia New"
        }]
  }, {
    id: "896785",
    brandname: "Nokia",
    modelname: "Asha",
	"Submodel": [{
          "name": "Asha 230"
        }, {
          "name": "Asha Asn01"
        }, {
          "name": "Nokia Asha Dual sim"
        }, {
          "name": "Asha 540"
        }]
  },  {
    id: "144745",
    brandname: "Samsung",
    modelname: "Galaxy ",
	"Submodel": [{
          "name": "Trend 840"
        }, {
          "name": "A5"
        }, {
          "name": "Note 4 Duos"
        }, {
          "name": "Galaxy Note Duos"
        },
		{
          "name": "Galaxy A5"
        }]
  }, {
    id: "986980",
    brandname: "Samsung",
    modelname: "Asha",
	"Submodel": [{
          "name": "Asha 230"
        }, {
          "name": "Asha Asn01"
        }, {
          "name": "Asha Dual sim"
        }, {
          "name": "Asha 540"
        }]
  },  
  ];
});

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;
  };
});
<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}}
        
      </label>
    </div>
  </div>
</div>

Improve this question
4
  • can u change datamodel? Commented Jan 22, 2016 at 11:22
  • if required we can change Commented Jan 22, 2016 at 13:52
  • check my answer and vote up;p you could change the model in js always ;) Commented Jan 22, 2016 at 13:56
  • pls check this jsfiddle.net/kLzfru76/5 .i am getting only brandname and modelname how can i get Submodel name and user entered value in that text box Commented Jan 22, 2016 at 14:14

1 Answer 1

Reset to default
0

If yes you could try do something like this.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
	$scope.selectedBrands = [];
  
  $scope.selectBrand = function(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 = [];
    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!');
  }

	$scope.phones = [{
    id: "986745",
    brandname: "Nokia",
    modelname: "Lumia",
	"Submodel": [{
          "name": "Lumia 735 TS",
          selected:false
        }, {
          "name": "Lumia 510",
          selected:false
        }, {
          "name": "Lumia 830",
          selected:false
        }, {
          "name": "Lumia New",
          selected:false
        }]
  }, {
    id: "896785",
    brandname: "Nokia",
    modelname: "Asha",
	"Submodel": [{
          "name": "Asha 230",
          selected:false
        }, {
          "name": "Asha Asn01",
          selected:false
        }, {
          "name": "Nokia Asha Dual sim",
          selected:false
        }, {
          "name": "Asha 540",
          selected:false
        }]
  },  {
    id: "144745",
    brandname: "Samsung",
    modelname: "Galaxy ",
	"Submodel": [{
          "name": "Trend 840",
          selected:false
        }, {
          "name": "A5",
          selected:false
        }, {
          "name": "Note 4 Duos",
          selected:false
        }, {
          "name": "Galaxy Note Duos",
          selected:false
        },
		{
          "name": "Galaxy A5",
          selected:false
        }]
  }, {
    id: "986980",
    brandname: "Samsung",
    modelname: "Asha",
	"Submodel": [{
          "name": "Asha 230",
          selected:false
        }, {
          "name": "Asha Asn01",
          selected:false
        }, {
          "name": "Asha Dual sim",
          selected:false
        }, {
          "name": "Asha 540",
          selected:false
        }]
  },  
  ];
});

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;
  };
});
<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 for="demo-{{phone.modelname}}">{{phone.modelname}}</label>
        <input id="demo-{{phone.modelname}}" type="checkbox" ng-model="phone.selected" >  
        
        <div ng-repeat="subm in phone.Submodel" ng-if="phone.selected">
         <label for="demo-{{subm.name}}">{{subm.name}}</label>
         <input id="demo-{{subm.name}}" type="checkbox" ng-model="subm.selected">  
        </div>      
    </div>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

pls check this jsfiddle.net/kLzfru76/5 .i am getting only brandname and modelname how can i get Submodel name and user entered value in that text box
something like that but i think ur data model should be fixed cuz for fackups xD jsfiddle.net/kLzfru76/7
i am not getting any submodel and price
ye you need clean up the code cuz its messy and something there is wrong but i gave u example how should that work:D
how can i change pls give some suggestion sir

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.