T alagbe T alagbe - 5 months ago 6
AngularJS Question

Show Data on click a parent angular

please am very new new to angular and am trying to do something i don't know if its possible. I have a json data and i want to render the option on click of an item. What i want to achieve is to show models of a phone on click of the name, and on click of a phone model show all the phone parts. But whenever i click on a phone i get undefined in my console.

my app.js file

(function(){

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

app.controller('phoneController',function($scope){
this.phones = [
{
name: 'Apple',
model: [{ name: 'Iphone 5'}, {name: 'Iphone 6'},{name: 'Iphone 6s'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
},
{
name: 'Samsung',
model: [{ name: 'S4'}, {name: 'S5'},{name: 'S6'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
},
{
name: 'Nokia',
model: [{ name: 'Lumia'}, {name: '3310'},{name: 'Asha'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
},
{
name: 'Blackberry',
model: [{ name: 'Passport'}, {name: 'Touch 10'},{name: 'Asha'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
}
];

$scope.loadModels=function(phone)
{
var phone=phone.name;
console.log (phone);
}
});

})();


My Html View

<div class="phones_wrapper row">

<!--begin container-->
<div class="container">

<form class="" action="#" method="post" ng-controller="phoneController as phone" >
<div class="row">
<div class="col-md-3 phone_display center" ng-repeat="p in phone.phones">
<label>
<input type="radio" ng-click="loadModels(phone)" ng-model="phone.name" name="phone" ng-value="{{p.name}}" />
<img src="http://placehold.it/200x200">
</label>
<p class="text text-center phone_name">{{p.name}}</p>
</div>

</div>
</form>




</div>
<!--begin container-->

</div>

Answer

Here is a simple example plnkr on how you can click on the list of the items you describe to view more details such as models and parts.

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="phone in phones" ng-click="showModels = true">{{phone.name}}
        <ul ng-show="showModels">
          <li ng-repeat="model in phone.model" ng-click="showParts = true">{{model.name}}
            <ul ng-show="showParts">
              <li ng-repeat="part in phone.part">
                {{part.name}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

Basically what you have to do is add repeaters and ng-click events to expand the content. I am pretty sure that from this example you will be able to fix it with your own styling and markup.

Comments