javascript - Show Data on click a parent angular -
please new new angular , trying don't know if possible. have json data , want render option on click of item. want achieve show models of phone on click of name, , on click of phone model show phone parts. whenever click on phone undefined in 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 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>
here simple example plnkr on how can click on list of items describe view more details such models , 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 have add repeaters , ng-click events expand content. pretty sure example able fix own styling , markup.
edit:
a better example can toggle viewing of models , parts.
<body ng-controller="mainctrl"> <ul> <li ng-repeat="phone in phones" ng-click="showmodels = !showmodels; $event.stoppropagation()">{{phone.name}} <ul ng-show="showmodels"> <li ng-repeat="model in phone.model" ng-click="showparts = !showparts; $event.stoppropagation()">{{model.name}} <ul ng-show="showparts"> <li ng-repeat="part in phone.part"> {{part.name}} </li> </ul> </li> </ul> </li> </ul> </body>
Comments
Post a Comment