AngularJS解決ng-if中的ng-model值無效的問題

更新時間：2017年06月21日 11:46:23 作者：abloume

本篇文章主要介紹了AngularJS解決ng-if中的ng-model值無效的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下

與其他指令一樣，ng-if指令也會創(chuàng)建一個子級作用域，因此，如果在ng-if指令中添加了元素，并向元素屬性增加 ng-model指令，那么ng-model指令對應(yīng)的作用域?qū)傩宰蛹壸饔糜?，而并非控制器注入?scope作用域?qū)ο?，這點在進(jìn)行雙向數(shù)據(jù)綁定時，需要引起注意。

<!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 的值： {} 
  </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方式中，每個包含的元素都擁有自己的作用域，因此，復(fù)選框元素也擁有自己的$scope作用域。相對于控制器作用域來說，這個作用域?qū)儆谝粋€子級作用域，所以，如果它想綁定控制器中的變量值，必須添加$parent標(biāo)識，只有這樣才能訪問到控制器中的變量。

因此，解決ng-if中ng-model值無效的問題，主要方法就是在綁定值時添加$parent標(biāo)識，或者用ng-show指令代替ng-if指令，這兩種方法都可以達(dá)到同樣的頁面效果。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular 容器部署的方法
這篇文章主要介紹了Angular 容器部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
angularjs中的e2e測試實例
這篇文章主要介紹了angularjs中的e2e測試實例,本文使用Protractor來完成e2e測試,需要的朋友可以參考下
2014-12-12
Angular模版驅(qū)動表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動表單的使用總結(jié)，本文實現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗，狀態(tài)管理，非常具有實用價值，需要的朋友可以參考下
2018-05-05
使用Angular CLI從藍(lán)本生成代碼詳解
這篇文章主要介紹了使用Angular CLI從藍(lán)本生成代碼詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
深入理解Angularjs中$http.post與$.post
本篇文章主要介紹了深入理解Angularjs中$http.post與$.post ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
angularJS提交表單（form）
這篇文章主要介紹了angularJS提交表單（form）的方法和示例,需要的朋友可以參考下
2015-02-02
highcharts 在angular中的使用示例代碼
本篇文章主要介紹了highcharts 在angular中的使用示例代碼，非常具有實用價值，需要的朋友可以參考下
2017-09-09
angular.js實現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實現(xiàn)列表orderby排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
使用yeoman構(gòu)建angular應(yīng)用的方法
下面小編就為大家?guī)硪黄褂脃eoman構(gòu)建angular應(yīng)用的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例
本篇文章主要介紹了詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例，有需要的小伙伴可以參考下。
2017-02-02