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 =＆＃34;命名＆＃34;）时遇到问题，专门用于放置值。

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

第0行：＆＃34; WIN_20170226_191746.JPG＆＃34; --- 0
第1行：＆＃34; WIN_20170226_191848.JPG＆＃34; --- 1
第2行：＆＃34; WIN_20170226_191908.JPG＆＃34; --- 2

应该显示的假设视图。

第0行：＆＃34; WIN_20170226_191746.JPG＆＃34; ---＆＃34;朋友＆＃34;
第1行：＆＃34; WIN_20170226_191848.JPG＆＃34; ---＆＃34;动物＆＃34;
第2行：＆＃34; WIN_20170226_191908.JPG＆＃34; ---＆＃34;汽车＆＃34;

换句话说：我如何制作（数据-ng-model =＆＃34;命名＆＃34;）来显示名称，例如＆＃34;朋友＆＃34;，＆＃34;动物＆＃34;，＆＃34;汽车＆＃34;写在ng-model =＆＃34;命名＆＃34;输入而不是显示不需要的值，如0,1,2？

Answer 1

如果您需要单独的＆＃34;命名＆＃34;对于ng-repeat循环中的每个循环的变量，您可以使用此数据-ng-model =＆＃34; rec.naming＆＃34;所以记录列表中的每一个也都有命名绑定。在您的控制器文件中，您的功能可以像这样修改

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

或者

你可以使用data-ng-model =＆＃34;命名[$ index]＆＃34;这样你就可以绑定到新列表了。在js文件中，您可以命名[index]。

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

Answer 2

我通过添加像这样的$ scope.fileNames = [];

这样的新范围数组找到了一个很好的解决方案。

用data-ng-model =＆＃34; fileNames [$ index]＆＃34;

替换输入模型

然后按索引检索其值，如$ 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>

由Angularjs循环遍历表

2 个答案: