快捷導(dǎo)航

AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解

更新時(shí)間：2016年11月29日 11:49:32 作者：DoctorQ

這篇文章主要介紹了AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解的相關(guān)資料,這里提供實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下

AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值

最近做項(xiàng)目遇到了ng-model是ng-repeat動(dòng)態(tài)生成的，ng-model=”變量”，什么變量，是未知的，所以你無法在$scope."變量"取到值，就算取到值也是其中一個(gè)值，這樣的問題，經(jīng)過百度一番查找找到解決方案，這里記錄下，也行可以幫助到大家。

代碼

html

<div>
  <div class="modal-header">
    <h3 class="modal-title">用例集全局參數(shù)配置</h3>
  </div>
  <div class="modal-body">
    <table class="table table-hover">
      <thead>
      <tr>
        <th>參數(shù)</th>
        <th>參數(shù)值</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()">
      應(yīng)用
    </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');
      };
    };

問題描述

因?yàn)閚g-model是ng-repeat動(dòng)態(tài)生成的，ng-model=”變量”，什么變量，是未知的，所以你無法在$scope."變量"取到值，就算取到值也是其中一個(gè)值，這個(gè)問題困擾了我一天，終于解決了。

解決方法

首先ng-model設(shè)置為$parent.conf[$index]:

用$parent的原因是ng-repeat產(chǎn)生的，他會(huì)為每一個(gè)input生成一個(gè)子scope對(duì)象，而$parent表示用父類的scope，這樣我們在JS文件中才能取到該值。
$index代表的意思是ng-repeat="param in params"遍歷時(shí)的下標(biāo)
conf是我們在js中的變量名實(shí)際效果

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

實(shí)際效果：