(AngularJS)制作一个" ng-show"特别适用于ng-repeat中的一个元素

时间:2017-07-25 15:03:19

标签: angularjs angularjs-ng-repeat ng-show

我在Angular开始,我在问是否可以制作一个" ng-show"对于" ng-repeat"中的一个元素为true,对其他元素为false?

我用这段代码解释自己:

html文件:

      <tbody ng-repeat="elem in List"  ng-init="visible = false">
                    <tr ng-class="elemSelected(elem)">
                        <td colspan="3">
                            <a href ng-click="clickElemScroll(Elem)"   >
                            <span class="glyphicon" ng-class="visible? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"></span>
                            <strong>{{elem.name}} </strong>
                            </a>
                        </td>
                    </tr>
                    <tr ng-show="visible" >
                      blabla
                    </tr>
</tbody>

js file:

  $scope.clickElemScroll = function (elem) {
                    if ($scope.elemSelected === elem) {
                        $scope.visible = true
                    } 
                };

如您所知,问题是所有elem都会滚动,如何只使我点击的元素可见?

1 个答案:

答案 0 :(得分:0)

您可以在要在ngRepeat中使用的元素上设置新属性。此外,不确定ng-class发生了什么,但我不建议在那里使用函数。如果您在选择时尝试设置课程,请尝试ng-class="{'selected': elem.selected}"

之类的内容
  <tbody ng-repeat="elem in List">
        <tr ng-class="elemSelected(elem)">
             <td colspan="3">
                  <a href ng-click="elem.selected = !elem.selected">
                     <span class="glyphicon" ng-class="visible? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"></span>
                        <strong>{{elem.name}} </strong>
                  </a>
             </td>
        </tr>
        <tr ng-show="elem.selected">
             blabla
        </tr>