2

I have object which contains mobile brand with models.i have included my object here 

angular.module('myApp', [])
    .controller("myCntrl", function ($scope) {

$scope.items= [{


    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"
}

]

})

My Expectation: here i am having 3 mobile brands with respective models.when i come to this page it should show 3 checkboxes (below i given)

  1. Nokia
  2. Samsung
  3. Htc

if i click nokia then it should show Nokia mobile models with checkboxs like (list with checkbox)

  1. Lumia 735 TS
  2. Nokia Asha 230
  3. Lumia 510

if i click Samsung or Htc then it should show respective models like nokia

when i submit i should get only checked checkbox values both brandname and modelname any one help me out

Vipin Jain
  • 3,686
  • 16
  • 35
  • pls check this https://jsfiddle.net/7pLsqhkg/3/ .if i want to add price for that particular model ?.i have added text box but when i submit it did't get value i am getting undefined –  Jan 20 '16 at 17:15

1 Answers1

0

Create a filter that filter the unique value.

AngularJs Remove duplicate elements in ng-repeat

It will be better if you have the brandnames in a separate array. Anyway. Create checkbox with that filter. Each checkbox will have a separate ng-change that will fire if you check/uncheck that box. On a check you will push the brandname to an array with selected brandnames. On uncheck you will remove brandname from that array.

Okey. So now we have our selected brandnames in an array. Next you will put into your html a nested ng-repeat. The first ng-repeat will iterate the selected brandnames and the second ng-repeat will iterate the items array. In the second ng-repeat you will have ng-if that will filter the models by comparing the current item brandname with the current parent brandname.

Example nested ng-repeat html:

<div ng-repeat="brand in selectedBrands">
  <div ng-repeat="item in items" ng-if="item.brandname === brand">
    // checkboxes and stuff here
  </div>
</div>

Later if I have time I might post some more code if you are still unable to code it yourself ;)

EDIT:

Here's something fast I came up with: JSFiddle

Hope it helps :P

Community
  • 1
  • 1
Hristo Enev
  • 2,421
  • 18
  • 29