Explore the scope of each item in ng-repeat

Question

Explore the scope of each item in ng-repeat

My table has rows that use their respective scope variables for conditional rendering:

<tr ng-repeat="row in data">
  <input type="text" data-ng-show="editMode" data-ng-model="row.smth"/>

The input is only shown when the row's scope variable editMode is true, and it works perfectly fine.

Now I want to add a new row dynamically:

$scope.data.push(my_new_row)

This operation works well. But then I wish to set the new row's scope variable editMode to something, and I'm currently lacking ideas on how to achieve this.

I am aware of an undocumented method involving $$childHead, but I find it inelegant.

javascript angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

To keep track of items, utilize $index in your code. Utilize the index to determine whether an item should be shown or hidden. Create a function that includes the show/hide logic and input the index as a parameter. Here is an example:

<div ng-repeat="row in data track by $index">
    <input type="text" data-ng-show="GetEditMode($index)" ng-model="row.smth[$index]">
</div>

For further information, refer to this link.

Answer 2

To keep track of items, utilize $index in your code. Utilize the index to determine whether an item should be shown or hidden. Create a function that includes the show/hide logic and input the index as a parameter. Here is an example:

<div ng-repeat="row in data track by $index">
    <input type="text" data-ng-show="GetEditMode($index)" ng-model="row.smth[$index]">
</div>

For further information, refer to this link.

Answer 3

Answer №2

To enable edit mode in row data, you have a couple of options.

<input type="text" data-ng-show="row.editMode" data-ng-model="row.smth"/>

Alternatively, you can also try this approach:

<input type="text" data-ng-show="this.editMode" ng-change="toggle(this);" data-ng-model="row.smth"/>

In your Controller, you can access the editMode property like this:

$scope.toggle = function(context){
        console.log(a);
        context.editMode=!context.editMode;
}

Answer 4

To enable edit mode in row data, you have a couple of options.

<input type="text" data-ng-show="row.editMode" data-ng-model="row.smth"/>

Alternatively, you can also try this approach:

<input type="text" data-ng-show="this.editMode" ng-change="toggle(this);" data-ng-model="row.smth"/>

In your Controller, you can access the editMode property like this:

$scope.toggle = function(context){
        console.log(a);
        context.editMode=!context.editMode;
}

Explore the scope of each item in ng-repeat

Answer №1

Answer №2

Similar questions

How to delete the last item of an array in AngularJS using scope

Only consider valid values for input and ignore any zeros

Is there a way to incorporate the image that was uploaded from the server onto an HTML page without using the file extension?

Multer is not recognizing the uploaded file and is returning req.file

What is the best way to toggle the visibility of multiple column groups in Ag-Grid community using dynamic

Elastic_Frame | "Error: Unable to process action as property 'toLowerCase' is not defined"

Create an excel spreadsheet using HTML tables with the help of jQuery

Having trouble getting my app.get calls to work in the new Node Express project

Utilize Node Package to Dispatch Firebase Push Notifications

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Learn how to efficiently print data from an object in AngularJS without repetition

Next.js page transitions causing Google Tag Manager to malfunction with 'react-gtm-module'

Successful AJAX Post request functioning exclusively within the Web Console (Preview)

Incorporate XHR into a JavaScript Function

Using Javascript to automatically submit a form when the enter key is pressed

Spinning an object smoothly in the opposite direction of the OrbitControls camera's y rotation in three.js

What is the best way to define 'this' context and reference an instance of an Angular 6 component?

Unable to link to '' because it is not recognized as a valid attribute of '' in Angular 2

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Having trouble with your Javascript Ajax call?