在 ng-click 时将逻辑应用于 ng-repeat 中的每个元素(AngularJS) [英] Apply logic to every element in an ng-repeat upon ng-click (AngularJS)

问题描述

我正在尝试构建一个媒体库，其中一次只能选择一个图像.为此，我使用 AngularJS 的 ng-repeat 函数生成了一个列表.到目前为止，当我单击一个元素时，它会向子 div 添加一个突出显示类并切换子表单元素的可见性.如何让点击对 ng-repeat 中的每个其他元素执行相反的操作?

<div ng-if="show" class="selected"><input class="bulk-check" type="hidden" name="ids[]" value="@include('_helpers.media_id')">

解决方案

您可以将显示的媒体保存在控制器中的临时变量中，并具有 2 个功能 1) 在单击项目时设置媒体对象 2) 可以显示哪些功能检查对象是否相等.

控制器:

 var shownMedia = $scope.medias[0];//设置默认媒体$scope.selectMedia = 函数(媒体){显示媒体 = 媒体；//点击时，将新媒体设置为选定媒体}$scope.canShow = 函数(媒体){返回 angular.equals(shownMedia, media);//检查这是否是显示的媒体}

查看:

 
{{media.name}}<div ng-if="canShow(media)" ng-class="{selected : canShow(media)}">{{media.description}}<input class="bulk-check" type="hidden" name="ids[]" value="@include('_helpers.media_id')">

示例实现Demo

angular.module('app', []).controller('ctrl', function($scope) {$scope.medias = [{名称:'media1',描述:media1"}, {名称:'media2',描述:media2"}, {名称:'media3',描述:media3"}];变量显示媒体 = $scope.medias[0];$scope.selectMedia = 函数(媒体){显示媒体 = 媒体；}$scope.canShow = 函数(媒体){返回 angular.equals(shownMedia, media);}});

.selected{颜色:蓝色；}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app" ng-controller="ctrl"><ul><li ng-click="selectMedia(media)" ng-repeat="media in medias"><span ng-class="{selected : canShow(media)}">{{media.name}}</span><div ng-if="canShow(media)">{{media.description}}<input class="bulk-check" type="hidden" name="ids[]" value="@include('_helpers.media_id')">

I'm trying to build a media library in which only one image can be selected at a time. To do this, I have a list generated with AngularJS's ng-repeat function. So far, when I click on an element, it adds a highlighting class to a child div and toggles the visibility of a child form element. How can I make the click do the opposite for every other element in the ng-repeat?

<li ng-click="show=!show" ng-repeat="media in media">
    <div ng-if="show" class="selected">
        <input class="bulk-check" type="hidden" name="ids[]" value="@include('_helpers.media_id')">
    </div>
</li>

解决方案

You could just save displayed media in a temp variable in your controller and have 2 functions 1) set the media object on click of item 2) can show function which checks for object equality.

Controller:

  var shownMedia = $scope.medias[0]; //Set you default media

  $scope.selectMedia = function(media) {
    shownMedia = media; //on click, set the new media as selected media
  }

  $scope.canShow = function(media) {
    return angular.equals(shownMedia, media); //Check if this is the displayed media
  }

View:

   <li ng-click="selectMedia(media)" ng-repeat="media in medias">
      {{media.name}}
      <div ng-if="canShow(media)" ng-class="{selected : canShow(media)}">
        {{media.description}}
        <input class="bulk-check" type="hidden" name="ids[]" value="@include('_helpers.media_id')">
      </div>
    </li>

Example implementation Demo

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.medias = [{
    name: 'media1',
    description: "media1"
  }, {
    name: 'media2',
    description: "media2"
  }, {
    name: 'media3',
    description: "media3"
  }];

  var shownMedia = $scope.medias[0];

  $scope.selectMedia = function(media) {
    shownMedia = media;
  }

  $scope.canShow = function(media) {
    return angular.equals(shownMedia, media);
  }

});

.selected{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-click="selectMedia(media)" ng-repeat="media in medias">
      <span ng-class="{selected : canShow(media)}">{{media.name}}</span>
      <div ng-if="canShow(media)">
        {{media.description}}
        <input class="bulk-check" type="hidden" name="ids[]" value="@include('_helpers.media_id')">
      </div>
    </li>
  </ul>
</div>

这篇关于在 ng-click 时将逻辑应用于 ng-repeat 中的每个元素(AngularJS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！