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>