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="naming") 的作用域时遇到了问题，该作用域专门用于放置值。

我的最终打印视图显示了类似这样的内容。

第 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="naming") 以 ng-model="naming" 输入而不是显示不需要的值，例如 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="naming[$index]" 以便绑定到一个新列表。在 js 文件中可以有命名[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>