angularjs中多层循环展示（针对每条记录，鼠标移上时，展示对应的div层）

业务场景：

1、投资记录列表 investList；

2、投资记录 下时间记录列表  investList.list；

3、当我鼠标移入某条记录的时候，对应展示该条记录的时间列表信息，其余不展示；

4、效果如下：

实现代码如下：

<table class="full-width-table invest-log-table" cellspacing="1">
                                    <thead>
                                        <tr>
                                            <th style="width: 160px;">借款标题</th>
                                            <th style="width: 90px;">年化收益率</th>
                                            <th style="width: 102px; padding-left:20px;">投资金额</th>
                                            <th style="width: 60px; padding-left:0px;">体验金</th>
                                            <th style="width: 80px;padding-left:10px;">已还本息</th>
                                            <th style="width: 75px;padding-left:20px;">未付利息</th>
                                            <th style="width: 180px;text-align: center;">时间</th>
                                            <th style="width: 60px;text-align: center;">状态</th>
                                            <th style="width: 190px;text-align: center;">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="investments">
                                                <tr ng-repeat="invest in investList" class="t-title">
                                                <!--  <td style="width: 160px;" ng-bind="invest.product_name.substring(0,7)+'...'"  title="{{invest.product_name}}"></td> -->
                                                 <!-- 投资项目 -->
                                                        <td class="t-title" >
                                                            <a  href="javascript:void(0);"   title="{{invest.product_name}}"  ng-bind="invest.product_name| cut:true:7:'...'"  
                                                              ng-mouseenter="invest.show = true" ng-mouseleave="invest.show = false"></a>
                                                             <div class="t-list"  ng-show="invest.show"  data-index="adv+''+{{$index}}">
                                                             <!-- 时间轴开始 -->
                                                                   <div class="scroll-pane">
                                                                       <div class="cd-timeline cd-container">
                                                                           <!-- 循环下面这个div -->
                                                                           <div ng-repeat="timeObj in invest.list"  class="cd-timeline-block" >
                                                                               <div class="cd-timeline-content">
                                                                                <div class="cd-timeline-time"  ng-bind="timeObj.date_time_2+''+timeObj.date_time_3"></div>
                                                                                <div class="cd-timeline-icon">
                                                                                    <img ng-src="/resources/front/js/timeline/{{timeObj.icon}}">
                                                                                    <!-- icon11.png  成功 icon22  满标  icon33 进入还款期  icon44 付息 icon55 付息成功 -->
                                                                                </div>
                                                                                <div class="cd-timeline-text">
                                                                                    <p ng-bind="timeObj.date_week"></p>
                                                                                    <p ng-bind="timeObj.message"></p>
                                                                                </div>
                                                                            </div> <!-- cd-timeline-content -->
                                                                           </div>
                                                                        <!-- 循环 end -->
                                                                    </div> 
                                                                    <div class="nowtime">{{now_time }}</div>
                                                                   </div>
                                                                   <!-- 时间轴 end  -->                                      
                                                             </div> 
                                                        </td>
                                                        
                                                 <td style="width: 102px;" ng-bind="invest.interest+'%'"></td>
                                                <td style="width: 100px; padding-left:20px;"  ng-bind="'￥'+invest.invest_amount"></td>
                                               <td style="width: 50px; padding-left:0px;"  ng-bind="'￥'+invest.invest_experience"></td>
                                                <td  style="width: 80px;padding-left:10px;"  ng-bind="'￥'+invest.repay_interest"></td>
                                                <td  style="width: 80px;padding-left:20px;"  ng-bind="'￥'+invest.not_repay_interest"></td>
                                                <td  ng-bind="invest.invest_time | date:'yyyy-MM-dd HH:mm:ss '"></td>
                                                <td style="text-align: center;" ng-bind="revestContrlByStatus(invest.status)"></td>
                                                 
                                                <td style="width: 190px;text-align: center;">
                                                    <span ng-controller="checkContractCtrl">
                                                        <a href="http://f.moon-box.net/" ng-click="getUrl(invest)">合同</a>
                                                    </span>
                                                    <span>
                                                        <a href="javascript:;" ng-click="getUrl(invest)">付息详情</a>
                                                    </span>

                                                </td>
                                                </tr>
                                            
                                        
                                    </tbody>
                                </table>

实现思路：

第一步：通过 ng-mouseenter 以及 ng-mouseleave 指令，控制某块内容的展示（注意 invest.show 中 invest代表某个循环的对象，不写会导致所有的都展示，所有的都不展示！）

 ng-mouseenter="invest.show = true" ng-mouseleave="invest.show = false"

第二步： 通过ng-show 中 invest.show 控制不同对象的展示

  <div class="t-list"  ng-show="invest.show"  data-index="adv+''+{{$index}}">
至此结束。
以上代码只供参考，实际运用中请参照需求。