Looping through Table by Angularjs

Question

我成功地通过 Angularjs 遍历表，以获取名为 {{rec}} 的确定范围的值，如下所示。

.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>اسم الملف</td>
                            <td>مسمى الملف</td>
                        </tr>
                    </thead>
                    <tr data-ng-repeat="rec in records">
                        <td style="border: 1px solid #000000">{{rec}}</td>
               // values here display successfully when I press button #Second and because there is a scope here named {{rec}}
                        <td style="border: 1px solid #000000">
                        <input data-ng-model="naming" type="text" style="width: 200px" />
               // But here values not display when I press button #Second and because (data-ng-model="naming") that scope not related with {{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>

但是我在循环访问名为(data-ng-model="nameing"(的未定义范围时遇到了问题，该范围专用于放置值。

我最终的打印视图显示的是这样的。

行 #0："WIN_20170226_191746.JPG" --- 0
行 #1："WIN_20170226_191848.JPG"--- 1
行 #2："WIN_20170226_191908.JPG"--- 2

应该显示如下内容的假设视图。

行 #0："WIN_20170226_191746.JPG"---"朋友">
行 #1："WIN_20170226_191848.JPG"---"动物">
行 #2："WIN_20170226_191908.JPG"---"汽车"

换句话说：我怎样才能使(data-ng-model="nameing"(显示像ng-model="nameing"输入中写的"朋友"，"动物"，"汽车"之类的名称，而不是显示不需要的值，如0,1,2？

Answer 1

如果你需要为ng-repeat循环中的每个循环提供一个单独的"命名"变量，你可以有这个data-ng-model="rec.naming"，这样记录列表中的每个变量也将绑定命名。在控制器文件中，可以像这样修改函数

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

否则

您可以使用 data-ng-model="nameing[$index]"，以便绑定到新列表。在 js 文件中，你可以有 nameing[index]。

我认为以后对我来说似乎是更好的解决方案。但在大多数情况下，第一种方法适合，但在您的示例中，您可能会选择第二种方法。如果您喜欢其中任何一种方法，或者找到更好的方法，请告诉我。谢谢

Answer 2

我通过添加新的作用域数组找到了一个很好的解决方案，如下所示$scope.fileNames = [];

并将输入模型替换为data-ng-model="fileNames[$index]">

然后按索引检索其值，如下所示$scope.fileNames[index]

所以所有代码都像：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>