2016-06-28 60 views
0

请对角度非常新,我试图做一些事情,我不知道它是否可能。我有一个JSON数据,并且我想在点击一个项目时渲染选项。我想要实现的是在点击名称时显示手机型号,并在点击手机型号时显示所有手机部件。但是,每当我点击一个手机,我在我的控制台得到undefined。单击父角度显示数据

我app.js文件

(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); 
    } 
    }); 

    })(); 

我的HTML视图

<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> 
+1

我认为p必须通过,而不是电话loadModels函数ng-click –

回答

0

下面是一个简单的例子plnkr你如何能点击你所描述来查看更多详细信息,例如项目的名单上作为模型和零件。

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

基本上你需要做的是添加中继器和ng-click事件来扩展内容。我很确定,从这个例子中你将能够用你自己的样式和标记来修复它。

编辑:

更好example,您可以切换的模式和部分观看。

<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> 
+0

谢谢你的plnkr,这真的很有帮助。但是,我可以在点击父母时隐藏其他手机吗?所以当我点击苹果,三星,黑莓和诺基亚应该隐藏。 – altoin

+0

@Talagbe当然,我会用一种切换显示/隐藏的方式更新我的答案。 –

+0

比你的帮助,我创建了一个新的页面与我给的代码,但是当我修改它,它没有显示模型。请看这里http://plnkr.co/edit/VgSnSFC8ccMKCCUIWyCP?p=info – altoin

0

我找到了,我改变了loadModels功能

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

,并根据@Praneeth Gudumasu建议,也改变了手机页。谢谢

0

它应该是这样的

 <div class="col-md-3 phone_display center" ng-repeat="p in phone.phones"> 
     <label> 
     <input type="radio" ng-click="loadModels(p)" ng-model="p.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> 

你应该使用重复模板中的重复对象,而不是范围对象(在你的情况下,变量“p”而不是“手机”)