应用逻辑，以在NG-点击一个NG重复的每一个元素（AngularJS） [英] Apply logic to every element in an ng-repeat upon ng-click (AngularJS)

问题描述

我试图建立，其中只有一个图像可以同时选择一个媒体库。要做到这一点，我有AngularJS的NG-复读功能生成的列表。到目前为止，当我点击一个元素，它增加了一个高亮类子DIV和切换子窗体元素的可见性。我怎样才能使点击做相反在所有其他元素的NG-重复？

 ＆LT;李NG点击=秀=秀！NG重复=媒体媒体＆GT;
    ＆LT; D​​IV NG-IF =秀类=选择＆GT;
        ＆LT;输入类=批量检查类型=隐藏的名字=IDS []值=@包括（'_ helpers.media_id'）＆GT;
    ＆LT; / DIV＆GT;
＆LT; /李＆GT;
 

解决方案

您可以只保存显示的媒体在你的控制器一个临时变量，有2个功能1）设置第2项的点击媒体对象）可显示功能，检查对象平等的。

控制器：

  VAR shownMedia = $ scope.medias [0]; //设置你默认的媒体  $ scope.selectMedia =功能（媒体）{
    shownMedia =介质; //上点击，将新媒体作为媒体的选择
  }  $ scope.canShow =功能（媒体）{
    返回angular.equals（shownMedia，媒体）; //检查，如果这是显示的媒体
  }
 

查看：

 ＆LT;李NG点击=selectMedia（媒体）NG重复=媒体中的媒体＆GT;
      {{media.name}}
      ＆LT; D​​IV NG-IF =泳庆（媒体）NG-CLASS ={选择：泳庆（媒体）}＆GT;
        {{media.description}}
        ＆LT;输入类=批量检查类型=隐藏的名字=IDS []值=@包括（'_ helpers.media_id'）＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; /李＆GT;
 

示例演示实施

\r

\r

angular.module（应用，[]）。控制器（CTRL ，功能（$范围）{\r
  $ scope.medias = [{\r
    名称：'并将media1'，\r
    介绍：并将media1\r
  }，{\r
    名称：'media2设置，\r
    介绍：media2设置\r
  }，{\r
    名称：'media3'，\r
    介绍：media3\r
  }];\r
\r
  变种shownMedia = $ scope.medias [0];\r
\r
  $ scope.selectMedia =功能（媒体）{\r
    shownMedia =介质;\r
  }\r
\r
  $ scope.canShow =功能（媒体）{\r
    返回angular.equals（shownMedia，媒体）;\r
  }\r
\r
}）;

\r

.selected {\r
  颜色：蓝色;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=CTRL＆GT;\r
  ＆LT; UL＆GT;\r
    ＆LT;李NG点击=selectMedia（媒体）NG重复=媒体中的媒体＆GT;\r
      ＆LT;跨度纳克级={选择：泳庆（媒体）}＆GT; {{media.name}}＆LT; / SPAN＆GT;\r
      ＆LT; D​​IV NG-IF =泳庆（媒体）＆GT;\r
        {{media.description}}\r
        ＆LT;输入类=批量检查类型=隐藏的名字=IDS []值=@包括（'_ helpers.media_id'）＆GT;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; /李＆GT;\r
  ＆LT; / UL＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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-点击一个NG重复的每一个元素（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！