默认点击ng-click angularjs中的第一个元素

default click on first element in ng-click angularjs

本文关键字：第一个 元素 angularjs ng-click 默认      更新时间：2023-09-26

我编写了下面一段代码，用于单击ng-repeat中的第一个元素，使其默认为活动:

<ul id="thumbnails">
        <li ng-repeat="thumbnail in thumbnails  | filter:query" ng-switch on='$first' data-ng-click="toggleObject.item = $index" >
            <div data-ng-class="{'active' : toggleObject.item == $index}" ng-switch-when='true' ng-click="getHdImage(thumbnail.IMAGE_ID)">
                <img id="imageViewContainer" ng-src="{{thumbnail.PATH_SMALL}}"/>
            </div>
        </li>
    </ul>

controller: 

        imageView.getViewsByGroupId($stateParams.groupid)
                    .success(function(data) {
                        $scope.thumbnails = data;
                        $scope.toggleObject = {item: -1};
                        console.log($scope);
        });

这样我就可以使用这个活动类将背景色设置为红色。但是默认的点击第一个元素不会发生。虽然手动点击也可以。

我做错了什么

您可以使用$first作用域变量，ng-repeat为您放置在作用域中。

也可以使用ng-init进行一些初始化。

<ul id="thumbnails">
  <li ng-repeat="thumbnail in thumbnails  | filter:query" data-ng-click="toggleObject.item = $index">
    <div data-ng-class="{'active' : $first}" ng-init="$first && getHdImage(thumbnail.IMAGE_ID)" ng-click="getHdImage(thumbnail.IMAGE_ID)">
      <img id="imageViewContainer" ng-src="{{thumbnail.PATH_SMALL}}" />
    </div>
  </li>
</ul>

你可以检查一下这个小活塞，这个演示就是它。

相关文章：