logo
down
shadow

Apply logic to every element in an ng-repeat upon ng-click (AngularJS)


Apply logic to every element in an ng-repeat upon ng-click (AngularJS)

By : Jack Elmore
Date : November 17 2020, 11:55 AM
I think the issue was by ths following , 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:
code :
  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
  }
   <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>
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>


Share : facebook icon twitter icon
AngularJS - Conditionally apply style using ng-style to first element in ng-repeat

AngularJS - Conditionally apply style using ng-style to first element in ng-repeat


By : user2226639
Date : March 29 2020, 07:55 AM
this one helps. I have an object of styles and I need to set another css style only for the first element. I created a directive especially for that, but it doesn't work
code :
<div class="row" 
    ng-style="{ true : rowCss }[$first]" 
    ng-repeat="top in gridObj">
    ...
angularjs ng-repeat hide element with a click event

angularjs ng-repeat hide element with a click event


By : Ramya Jayaraman
Date : March 29 2020, 07:55 AM
This might help you There is a list of items which is displayed using ng-repeat. Each item is associated with a hide link. The intent is to hide an item if its corresponding hide link is clicked. , You can use $index to do that.
Something like this.
code :
  <div ng-repeat="item in products">
        <div ng-hide="selected.index === $index">{{ item }}</div>
        <a href"javascript:void(0)" ng-click="selected.index = $index">[delete]</label>
  </div>
Angularjs: How to apply a CSS property to a single element generated by ng-repeat directive

Angularjs: How to apply a CSS property to a single element generated by ng-repeat directive


By : vinod
Date : March 29 2020, 07:55 AM
it helps some times You can use CSS to obtain this effect with the :hover selector (https://www.w3schools.com/cssref/sel_hover.asp)
like this:
code :
div:hover {
    background-color:green;
}
Angularjs: ng-show expression within an ng-repeat - can I set a header element to be visible if any of the ng-repeat exp

Angularjs: ng-show expression within an ng-repeat - can I set a header element to be visible if any of the ng-repeat exp


By : Rajesh Prathaban
Date : March 29 2020, 07:55 AM
hop of those help? I have a list of users in the following format:
code :
 ng-show= "(uController.users | filter:{ Changed: true}).length"
AngularJS: Apply a CSS class on the first element with ng-repeat

AngularJS: Apply a CSS class on the first element with ng-repeat


By : Sahib Cebrayilli
Date : March 29 2020, 07:55 AM
Any of those help I am looking for the first index the passes through my ng-if condition which is not always $index === 0, and cant be solved using $first. , You don't have to check if $index is $first in:
Related Posts Related Posts :
  • what can or cannot be done with a controller created in a module Vs controller created globally?
  • Angularjs - add ng-* attributes using directives
  • Why are my Angular, absolute path, URL's not compiling properly with Closure Compiler?
  • AngularJS routing not working properly in PhoneGap
  • AngularJS: Create new scope variable name using a variable value
  • Directive scope update does not update controller scope (AngularJs)
  • Unit-test a angular controller function in a directive
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • AngularJS determine filter in controller
  • How to deploy an app using ionic framework to Amazon? (elastic beanstalk prefered)
  • Conditional injection of a service in AngularJS
  • Filtering on object properties not working
  • Open $modal from the service and pass variables to the controller
  • ngClick evaluated against scope instead of isolateScope
  • onEnter and onExit are not called when state is left/activated in angularjs ui router
  • Shared client & server modules with angularjs and pongular
  • Getting the angular app to run when using protractor
  • Angularjs: create a link for download different types of file
  • AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent
  • Angular HTML5 mode, Wordpress, Rewrites, Apache and You
  • Using angular js form validations in <form:input> tag
  • AngularJS call common functions in a directive template
  • AngularJS Promise resolved incorrectly
  • properly clearing whole AngularJS ui-grid chart
  • Can not figure out how to store $rootScope in angular.bootstrap
  • animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox
  • Auth0 IE Issue: Unable to get property 'frames' of undefined or null reference
  • Am I misusing directives with too much logic?
  • Use an Angular JS value as a parameter of TWIG "path" function in Symfony 2
  • multiple function on ng-click angularjs
  • Converting $.ajax call to $http call in angular 404 error
  • Angularjs templateUrl file location not found
  • How to execute the function after change page in angularjs?
  • Pass variable to AngularJS directive without isolated scope
  • OAuth, Custom Login, or Both
  • Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent
  • Compare objects in angularjs
  • Combine "Checkbox" & "Avatar" in an Ionic Framework List
  • Issue with the Angular UI router when inheriting from a parent state
  • Is there a way to initialize an Angular Service without DI into controller
  • Why is a parent controller's $scope not accessible from a (child) directive?
  • How to get back button in Ion-tabs page
  • AngularJS bind class attribute to model
  • How can I get AngularJS ui-router to respond correctly to a browser page refresh?
  • Angular validation does not work
  • Breez Create Complex Entities
  • Drag and drop using protractor in dthmlx component
  • In Angular JS, what is the default 'cache' value that is used when sending request with $http service?
  • How to change placeholder for single textbox in angular?
  • $ is not defined - jquery angular mixing
  • CORS issue angularjs and spring security
  • Angularjs cannot select last item in dropdown the first time
  • Angularjs - $watch issue
  • On change radio button to no the span should hide in angular
  • Creating a wordcloud generator in Angularjs
  • Angular UI Bootstrap collapse - whats wrong?
  • AngularJS after redirect from app to app, the default page is not loading
  • Why does my scope update my factory and my factory update my scope when it should not?
  • AngularJS testing $httpBackend.whenGET().respond() not working with number as parameter
  • Setting up Login in Angular App
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org