Question

请给我一个非常新的角度，我正在尝试做一些我不知道是否可能的事情。我有一个json数据，我想在点击一个项目时呈现该选项。我想要实现的是在点击名称时显示手机型号，点击手机型号即可显示所有手机部件。但每当我点击手机时，我的控制台都会出现未定义的内容。

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

Answer 1

以下是一个简单示例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>

Answer 2

我找到了，我将loadModels函数更改为

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

并根据@Praneeth Gudumasu推荐将手机更改为p。谢谢

Answer 3

应该是这样的

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

你应该在重复模板中使用重复对象而不是范围对象（在你的案例变量＆＃34; p＆＃34; not＆＃34; phone＆＃34;）

单击父角度显示数据

3 个答案: