AngularJS中获取ng-repeat动态生成的ng-model值

来源:互联网 发布:mysql数据库教程pdf 编辑:程序博客网 时间:2024/05/18 07:08

angularJS动态设置model,并设置/获取model的值

代码

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-modelng-repeat动态生成的,ng-model=”变量”,什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这个问题困扰了我一天,终于解决了。

解决方法

首先ng-model设置为$parent.conf[$index]:

  • $parent的原因是ng-repeat产生的,他会为每一个input生成一个子scope对象,而$parent表示用父类的scope,这样我们在JS文件中才能取到该值。
  • $index代表的意思是ng-repeat="param in params"遍历时的下标
  • conf是我们在js中的变量名

我们在controller中定义了一个$scope.conf = [];就是一个数组,刚好通过上面的代码,为该数组添加了元素,然后我们通过scope.conf刚好把ng-model的所有元素自动保存了。

实际效果

这里写图片描述

3 1
原创粉丝点击