AngularJS解决ng-if中的ng-model值无效的问题-创新互联

与其他指令一样，ng-if指令也会创建一个子级作用域，因此，如果在ng-if指令中添加了元素，并向元素属性增加 ng-model指令，那么ng-model指令对应的作用域属性子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数据绑定时，需要引起注意。

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的南和网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

<!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>

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：AngularJS解决ng-if中的ng-model值无效的问题-创新互联
文章地址：https://www.cdcxhl.com/article48/cshsep.html

成都网站建设公司_创新互联，为您提供用户体验、网站建设、网站收录、商城网站、静态网站、ChatGPT

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容