logo
down
shadow

Changing ng-class when clicked (nested ng-repeat)


Changing ng-class when clicked (nested ng-repeat)

By : Delray Nelson
Date : November 22 2020, 02:59 PM
like below fixes the issue The proper Angular approach to track indices across multiple ngRepeats is to use ngInit to create a local variable that aliases $index for each instance of ngRepeat. Using $parent to acquire its $index position is generally discouraged.
And in the example below, we have two ngRepeats and therefore two aliased index variables: outerIndex and innerIndex:
code :
  <tbody ng-repeat="country in countries" ng-init="outerIndex = $index">
    <tr ng-repeat="city in country.cities" ng-init="innerIndex = $index">
      <td>{{city}}</td>
      <td>{{country.name}}</td>
      <td>({{outerIndex}}, {{innerIndex}})</td>
    </tr>
  </tbody>
 $scope.itemClicked = function (status, job) {
   if (status.isActive) {
     status.isActive = false;
   } else {
     angular.forEach(job.statuscollection, function(status) {
       status.isActive = false;
     });
     status.isActive = true;
   }
 }


Share : facebook icon twitter icon
Link properties between nested classes to have same values when changing the property from the nested/base class

Link properties between nested classes to have same values when changing the property from the nested/base class


By : Logan
Date : March 29 2020, 07:55 AM
Change css class of button clicked in angular with ng-repeat

Change css class of button clicked in angular with ng-repeat


By : gwj3141
Date : March 29 2020, 07:55 AM
wish helps you Instead of assigning to the common scope variable assign it to the premier object and use it in the class
HTML
code :
<div ng-click="validateClick(premier, $index)" ng-class="{premier: premier.isPremier, random: premier.isRandom}" ng-repeat="premier in premiers" class="btn btn-default btn-game" data-correct="{{premier.correct}}" href="#" role="button">
                {{premier.name}}
</div>
$scope.validateClick = function (premier, index) {
        if (premier.correct == "premier") {
            premier.isPremier = true;
            console.log(premier.isPremier + index)
        } else {
            premier.isRandom = true;
            console.log(premier.isRandom + index)
        }
    }
Changing class in the ng-repeat using the index value

Changing class in the ng-repeat using the index value


By : Yoav Levi
Date : March 29 2020, 07:55 AM
it helps some times You are changing outer scope omega.harish value which is common for all items in the ngRepeat. Instead create local scope copy of omega.harish with ngInit directive:
code :
<div ng-repeat="result in omega.subscriberdata">
    <div ng-class="{div0f:result.subscribed==harish,div0g:!result.subscribed==harish}" id="mecota0f" 
        ng-init="harish = omega.harish"
        ng-click="harish=!result.subscribed">
    </div>
</div>
Make selected <a> bold when clicked inside nested ng-repeat

Make selected <a> bold when clicked inside nested ng-repeat


By : Erastus K. Ngotho
Date : March 29 2020, 07:55 AM
hope this fix your issue I want to make selected choice as bold. Here is the Plunker which I have created. I thought of putting ng-class='className' and then setting , You can use ng-class like:
code :
<a ng-class="{'selection': $parent.val == group.name}" ng-click="selectedVal(group.name)">{{group.name}} ({{group.count}})</a>
how to toggle ng-class when directive ng-repeat item is clicked

how to toggle ng-class when directive ng-repeat item is clicked


By : NSQ DEV
Date : March 29 2020, 07:55 AM
I wish this help you See forked plnkr
In a nutshell, you're are using ng-repeat for the directive user-group-item. For each repeated user-group-item (2 in this case), the directive will make its own scope and controller method initialization. So you can not use $scope.selected inside the directive to store what is selected, because each user-group-item will have its own selected variable in its $scope
Related Posts Related Posts :
  • I want to restrict HTML input autocomplete to 3 letter minimum
  • tinyMCE editor not updating on the fly
  • typescript kendo-ui call method from string
  • HttpCompileException was unhandled by user code (when i am adding c# code in script)
  • Send form data as array of objects to controller in asp.net mvc
  • Javascript, multi file modules and Require.Js
  • how to render a complete new template and leave the application template in ember
  • Hover unrelated divs
  • Permute string until it matches some input?
  • How to fire JQuery change event when input value changed programmatically?
  • AJAX: POST data to a different url
  • checkbox column in jquery datatable
  • Document.evaluate for documents without namespaceURI crashes Microsoft Edge
  • Bootstrap Menu with "More" option Responsive issue
  • Standard inputs not being added to Angularjs Form $Scope
  • Express promise throw error
  • onclick and get in jquery
  • How to get the country code from Google Places API
  • Passing parameters url in Select2
  • Is there any frame work for Marklogic to write javascript code?
  • How to implement a boostrap template over bootstrap-sass gem
  • Why fixed div comes out when horizontally scrolled?
  • How to limit scope of a function in javascript/ jquery
  • Overlapping legend d3.js
  • Apply transition to div
  • Javascript game help - counting with dice
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • Making css auto slider
  • why can't I defne the function first?
  • Pagination with MongoDB in Node.js (With Sorting)
  • How to repeat each() without page refresh
  • Position div at position of another div
  • Click handler is called multiple times in jQuery animate
  • How to multiply each element in an array with a different number (javascript)
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co