Navigating through the Table using AngularJS

Question

Navigating through the Table using AngularJS

I was able to successfully loop through a table using AngularJS to retrieve values from a specified scope named {{rec}} as shown below.

HTML

             <div id="AngularContainer" data-ng-app="myApp" data-ng-controller="myCtrl">
             <a data-ng-click='<%# "ShowFiles("+ Eval("FilesNames") + ")" %>' style="cursor: pointer">
                <table id="fils" style="display:none;">
                    <thead>
                        <tr>
                            <td>File Name</td>
                            <td>Designation</td>
                        </tr>
                    </thead>
                    <tr data-ng-repeat="rec in records">
                        <td style="border: 1px solid #000000">{{rec}}</td>
               // The values here are displayed successfully when button #Second is pressed, because there is a scope named {{rec}}
                        <td style="border: 1px solid #000000">
                        <input data-ng-model="naming" type="text" style="width: 200px" />
               // However, the values do not display when I press button #Second, because (data-ng-model="naming") that scope is not related to {{rec}}
                        </td>
                    </tr>
                    <tfoot>
                        <tr>
                            <td colspan="2" style="text-align: center">
                                <input id="Second" data-ng-click="dothat()" class="sav" type="button" value="Save" />            
                            </td>
                        </tr>
                    </tfoot>
                </table>
            <div id="fnalmsg"></div>
          </div>

Angularjs

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.ShowFiles = function (elm) {
            $scope.records = elm;
        };

        $scope.dothat = function () {
            var msg = document.getElementById("fnalmsg");

            var index = 0;
            $scope.records.forEach(function (rec, naming) {
                msg.innerHTML =
                msg.innerHTML + 'row #' + (index++) + ': ' + JSON.stringify(rec) + ' --- ' + naming + '<br />';
            });
        };
    });
  </script>

However, I encountered an issue with looping through an undefined scope named (data-ng-model="naming") which is meant to store values.

The final output appeared as follows:

row #0: "WIN_20170226_191746.JPG" --- 0
row #1: "WIN_20170226_191848.JPG" --- 1
row #2: "WIN_20170226_191908.JPG" --- 2

The expected output should be like this:

row #0: "WIN_20170226_191746.JPG" --- "Friends"
row #1: "WIN_20170226_191848.JPG" --- "Animals"
row #2: "WIN_20170226_191908.JPG" --- "Cars"

In simpler terms: How can I make (data-ng-model="naming") display names like "Friends","Animals","Cars" as entered in the ng-model="naming" inputs rather than showing unwanted values like 0,1,2 ?

javascript angularjs

Answer 1

Answer №1

If you find yourself in need of a separate "naming" variable for each iteration within the ng-repeat loop, you can define a data-ng-model="rec.naming" so that each item in the records list will have its own bound naming property. In your controller file, you can update your function as follows:

 $scope.records.forEach(function (rec) {
            msg.innerHTML =
            msg.innerHTML + 'row #' + (index++) + ': ' + JSON.stringify(??) + ' --- ' + rec.naming+ '<br />';
        });

Alternatively,

You could utilize data-ng-model="naming[$index]" to bind to a new list. In the JS file, you can access naming[index].

In my opinion, the latter approach appears to be the better solution. However, in certain scenarios, the first method may be more suitable. Consider using the second approach based on your specific requirements. Feel free to share your thoughts on these approaches or suggest any other solutions. Thank you.

Answer 2

If you find yourself in need of a separate "naming" variable for each iteration within the ng-repeat loop, you can define a data-ng-model="rec.naming" so that each item in the records list will have its own bound naming property. In your controller file, you can update your function as follows:

 $scope.records.forEach(function (rec) {
            msg.innerHTML =
            msg.innerHTML + 'row #' + (index++) + ': ' + JSON.stringify(??) + ' --- ' + rec.naming+ '<br />';
        });

Alternatively,

You could utilize data-ng-model="naming[$index]" to bind to a new list. In the JS file, you can access naming[index].

In my opinion, the latter approach appears to be the better solution. However, in certain scenarios, the first method may be more suitable. Consider using the second approach based on your specific requirements. Feel free to share your thoughts on these approaches or suggest any other solutions. Thank you.

Answer 3

Answer №2

I came across a great solution for this problem by creating a new scope array like so: $scope.fileNames = [];

Instead of using the input model directly, I replaced it with data-ng-model="fileNames[$index]"

This allowed me to retrieve the values by index using $scope.fileNames[index]

Here is how the code looks like now: https://jsfiddle.net/medoo/wgc1my7d/3/

HTML

<div data-ng-app="myApp" data-ng-controller="myCtrl">
        <table>
            <tr data-ng-repeat="oneFile in ShowFiles">
                <td style="border: 1px solid #000000">{{oneFile}}</td>
                <td style="border: 1px solid #000000">
                    <input data-ng-model="fileNames[$index]" type="text" style="width: 200px" />
                </td>
            </tr>
        </table>
        <input id="save" data-ng-click="save()" type="button" value="Save" />
        <div id="msg"></div>
    </div>

ANGULARJS

<script>
  var arr = ["~\\191746.JPG", "~\\191848.JPG", "~\\191908.JPG"];
  var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
     $scope.ShowFiles = arr;
      $scope.fileNames = [];

      $scope.save = function () {
    var msg = document.getElementById("msg");
    $scope.ShowFiles.forEach(function (oneFile, index) {
        msg.innerHTML =
        msg.innerHTML + 'row #' + (index + 1) + ': ' + JSON.stringify(oneFile) + ' --- ' + $scope.fileNames[index] + '<br />';
    });
};
}); 
</script>

Answer 4

I came across a great solution for this problem by creating a new scope array like so: $scope.fileNames = [];

Instead of using the input model directly, I replaced it with data-ng-model="fileNames[$index]"

This allowed me to retrieve the values by index using $scope.fileNames[index]

Here is how the code looks like now: https://jsfiddle.net/medoo/wgc1my7d/3/

HTML

<div data-ng-app="myApp" data-ng-controller="myCtrl">
        <table>
            <tr data-ng-repeat="oneFile in ShowFiles">
                <td style="border: 1px solid #000000">{{oneFile}}</td>
                <td style="border: 1px solid #000000">
                    <input data-ng-model="fileNames[$index]" type="text" style="width: 200px" />
                </td>
            </tr>
        </table>
        <input id="save" data-ng-click="save()" type="button" value="Save" />
        <div id="msg"></div>
    </div>

ANGULARJS

<script>
  var arr = ["~\\191746.JPG", "~\\191848.JPG", "~\\191908.JPG"];
  var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
     $scope.ShowFiles = arr;
      $scope.fileNames = [];

      $scope.save = function () {
    var msg = document.getElementById("msg");
    $scope.ShowFiles.forEach(function (oneFile, index) {
        msg.innerHTML =
        msg.innerHTML + 'row #' + (index + 1) + ': ' + JSON.stringify(oneFile) + ' --- ' + $scope.fileNames[index] + '<br />';
    });
};
}); 
</script>

Navigating through the Table using AngularJS

Answer №1

Answer №2

Similar questions

How can values be passed to child components in Vue when using component tags for dynamically switching components?

Cannot access jquery within an angular directive

Repetitive bouncing in a trampoline leads to the error message "Call stack has reached maximum size"

How to animate a left border shifting to the center using JavaScript

How to update an Array<Object> State in ReactJS without causing mutation

The jQuery datatable offers a convenient date function that allows for date manipulation in milliseconds format

"Utilizing Javascript's Regex to selectively replace only the first character

Unable to retrieve real-time data from Firestore using getStaticPaths in Next.js

AngularJS encounters a lack of 'Access-Control-Allow-Origin' header

Struggling to locate images in Three.js

Changes made to code within the node_modules directory do not appear in the browser

Attempting to single out various entities within a JSON array through the use of radio buttons

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

Ways to send data to a popup in svelte

Issue with Angular 8: click event is not triggering when using ngFor directive to iterate through arrays of objects

404 error occurs when AngularJS removes hash symbol from URLs

Utilizing an object map to pass objects as props without losing their keys

Difficulty in implementing jQuery accordion height style using either content or fill option

Learn how to activate a JS native event listener using jQuery for the 'change' event

AngularJS: Handling multiple asynchronous calls simultaneously in a function