AngularJS 擷取ng-repeat動態產生的ng-model值執行個體詳解_AngularJS

AngularJS 擷取ng-repeat動態產生的ng-model值

              最近做項目遇到了ng-model是ng-repeat動態產生的，ng-model=”變數”，什麼變數，是未知的，所以你無法在$scope."變數"取到值，就算取到值也是其中一個值，這樣的問題，經過百度一番尋找找到解決方案，這裡記錄下，也行可以協助到大家。

代碼

html

<div>  <div class="modal-header">    <h3 class="modal-title">用例集全域參數配置</h3>  </div>  <div class="modal-body">    <table class="table table-hover">      <thead>      <tr>        <th>參數</th>        <th>參數值</th>      </tr>      </thead>      <tbody ng-repeat="param in params">      <tr>        <td>{{param}}</td>        <td><input name="test" class="form-control" type="text" ng-trim="false" ng-model="$parent.conf[$index]"/></td>      </tr>      </tbody>    </table>  </div>  <div class="modal-footer">    <button class="btn btn-primary" ng-click="ok()">      應用    </button>    <button class="btn btn-warning" ng-click="cancel()">取消</button>  </div></div>

JS

var ModalInstanceCtrl = function ($scope, $modalInstance, params) {      $scope.params = params;      $scope.conf = [];      $scope.ok = function () {        console.log($scope.conf);        $modalInstance.close($scope.conf);      };      $scope.cancel = function () {        $modalInstance.dismiss('cancel');      };    };

問題描述

因為ng-model是ng-repeat動態產生的，ng-model=”變數”，什麼變數，是未知的，所以你無法在$scope."變數"取到值，就算取到值也是其中一個值，這個問題困擾了我一天，終於解決了。

解決方案

首先ng-model設定為$parent.conf[$index]:

1. 用$parent的原因是ng-repeat產生的，他會為每一個input產生一個子scope對象，而$parent表示用父類的scope，這樣我們在JS檔案中才能取到該值。
2. $index代表的意思是ng-repeat="param in params"遍曆時的下標
3. conf是我們在js中的變數名實際效果

我們在controller中定義了一個$scope.conf = [];就是一個數組，剛好通過上面的代碼，為該數組添加了元素，然後我們通過scope.conf剛好把ng-model的所有元素自動儲存了。

實際效果：

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！