單擊父角度顯示數據

請對角度非常新，我試圖做一些事情，我不知道它是否可能。我有一個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>

來源

2016-06-28 altoin

我認爲p必須通過，而不是電話loadModels函數ng-click –

下面是一個簡單的例子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>

來源

2016-06-28 10:57:12

謝謝你的plnkr，這真的很有幫助。但是，我可以在點擊父母時隱藏其他手機嗎？所以當我點擊蘋果，三星，黑莓和諾基亞應該隱藏。 – altoin

@Talagbe當然，我會用一種切換顯示/隱藏的方式更新我的答案。 –

比你的幫助，我創建了一個新的頁面與我給的代碼，但是當我修改它，它沒有顯示模型。請看這裏http://plnkr.co/edit/VgSnSFC8ccMKCCUIWyCP?p=info – altoin

我找到了，我改變了loadModels功能

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

，並根據@Praneeth Gudumasu建議，也改變了手機頁。謝謝

來源

2016-06-28 11:04:18 altoin

它應該是這樣的

 <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」而不是「手機」）

來源

2016-06-28 11:11:48

單擊父角度顯示數據

回答

相關問題