不知道你们遇到没遇到这种情况，谈谈ng-if/ng-repeat产生子作用域，ng-model取不到相应的值
Posted 犹记惊鸿照影（JS）
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不知道你们遇到没遇到这种情况，谈谈ng-if/ng-repeat产生子作用域，ng-model取不到相应的值相关的知识，希望对你有一定的参考价值。
不知道你们遇到没遇到这种情况，谈谈ng-if/ng-repeat产生子作用域，ng-model取不到相应的值，这个问题是怎么产生的呢？，因为他们都各级产生了一个子作用域。
ng-repeat demo
ng-repeat经常是用来解析一个数组，将值赋值到一个list中
具体的$parent主要应用在重名的情况下
<!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> </head> <body> <script> angular.module("myapp",[]).controller(‘myctrl‘,function($scope){ $scope.item={ name:"kangkang" } $scope.bbb="111" $scope.list=[{name:"limei"},{"name":‘lily‘}] }) </script> <ul ng-controller="myctrl"> <li ng-repeat="item in list"> <div>这是子作用域获得到的值<span ng-bind="item.name"></span></div> <div>这是bbb获得到的值<span ng-bind="bbb"></span></div> <div>这是父作用域获得到的值<span ng-bind="$parent.item.name"></span></div> <div>这是父作用域bbb获得到的值<span ng-bind="$parent.bbb"></span></div> </li> </ul> </body> </html>
ng-if demo
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .frame{ padding: 5px 8px; margin: 0px; font-size: 12px; width: 320px; background-color: #eee; } .frame div{ margin: 5px 0px; } </style> </head> <body> <div ng-controller="myCtrl" class="frame"> <div> a 的值： {{a}} <br> b 的值： {{b}} </div> <div> 普通方式： <input type="checkbox" ng-model="a"> </div> <div ng-if="!a"> ngIf方式：<input type="checkbox" ng-model="$parent.b"> </div> </div> <script> angular.module(‘myApp‘, []) .controller(‘myCtrl‘, function($scope){ $scope.a = false; $scope.b = false; }) </script> </body> </html>
以上是关于不知道你们遇到没遇到这种情况，谈谈ng-if/ng-repeat产生子作用域，ng-model取不到相应的值的主要内容，如果未能解决你的问题，请参考以下文章
html ng-class和ng-if（ng-class可以包含一个对象，其中key和expression对作为对象，ng-if类似于if语句）