model值实例详解,model遇到的问题

有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变,所以你无法在$scope.”变量”取到值

在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变。上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决。

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

例如:

             
最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model=”变量”,什么变量,是未知的,所以你无法在$scope.”变量”取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家。

html:

代码

<body>
<div ng-controller="selectController">
  <div ng-repeat="pop in citylist">
    <select ng-model="p">
      <option value="" style="display:none;">{{pop.pop}}</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
    <button ng-click="cs()">ceshi</button>
  </div>
</div>
</body>

html

js:

<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>
<script>
  var app = angular.module('app', []);
  app.controller('selectController', function ($scope) {
    $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
    $scope.cs=function(){
      console.log($scope.p);
    }
  })
</script>

JS

很简单的功能,想要在点击更改按钮时获取select当前选中的数据内容,但是你会发现这样写只能得到undefined,此时有的人会提出可以将p赋予成为一个对象,通过key:value的方式来保存每一次的选择

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');
      };
    };
$scope.p={};

问题描述

这样确实没问题,但是会有一个新的问题那就是只要改动了一项,那么所有的内容都会跟着一起改变,那么有没有更好的方法呢?

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

只要一个小小的改动

解决方法

html:

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

<button ng-click="cs(p)">ceshi</button>
  1. 用$parent的原因是ng-repeat产生的,他会为每一个input生成一个子scope对象,而$parent表示用父类的scope,这样我们在JS文件中才能取到该值。
  2. $index代表的意思是ng-repeat=”param in params”遍历时的下标
  3. conf是我们在js中的变量名实际效果

js:

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

 $scope.cs=function(p){
      console.log(p);
    }

实际效果:

这只是个简单的例子,如大家在实际使用时发现有别的问题也可以在评论中留言。

图片 1

您可能感兴趣的文章:

  • AngularJs ng-repeat
    嵌套如何获取外层$index
  • AngularJS入门(用ng-repeat指令实现循环输出
  • AngularJS
    获取ng-repeat动态生成的ng-model值实例详解
  • AngularJS
    ng-repeat数组有重复值的解决方法
  • Angularjs的ng-repeat中去除重复数据的方法
  • AngularJS使用ng-repeat指令实现下拉框
  • AngularJS实践之使用ng-repeat中$index的注意点
  • Angularjs中ng-repeat的简单实例

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
  • AngularJs ng-repeat
    嵌套如何获取外层$index
  • AngularJS入门(用ng-repeat指令实现循环输出
  • Angularjs的ng-repeat中去除重复数据的方法
  • AngularJS使用ng-repeat指令实现下拉框
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS基础 ng-repeat
    指令简单示例
  • Angularjs渲染的 using
    指令的星级评分系统示例
  • Angular
    ng-repeat遍历渲染完页面后执行其他操作详细介绍
  • Angular.js中下拉框实现渲染html的方法
  • Angular将填入表单的数据渲染到表格的方法
  • AngularJS监听ng-repeat渲染完成的两种方法