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> 

但我专门把值通过命名（数据-NG-模型= “命名”）未定义范围循环问题。

而我最终的印刷视图显示了这样的东西。

行＃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”）显示名称，如“朋友”，“动物”，“汽车” “输入，而不是显示不需要的值，如0,1,2？

Answer 1

如果您需要为ng-repeat循环中的每个循环指定一个单独的“命名”变量，那么可以使用此数据ng-model =“rec.naming”，以便记录列表中的每个变量都将命名为绑定。在你的控制文件的功能，可以像修改这个

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

否则

您可以使用数据-NG-模型=“命名[$指数]”，这样你就可以绑定到一个新的列表。在js文件中，您可以命名[index]。

我觉得后来似乎更好的解决方案。但在大多数情况下，第一种方法将适合，但在您的示例中，您可能会采用第二种方法。让我知道你是否喜欢这种方法中的任何一种，或者如果你找到更好的方法。谢谢

Answer 2

我发现一个很好的解决方案，通过添加新的作用域数组像这样$ scope.fileNames = [];

和替换为数据-NG-模型输入模型=“文件名[$指数]”

然后，通过像这样$范围索引检索其值。文件名[索引]

因此，所有的代码将是这样的：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>