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指令對應的作用域屬性子級作用域，而并非控制器注入的$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 的值： {}
</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方式中，每個包含的元素都擁有自己的作用域，因此，復選框元素也擁有自己的$scope作用域。相對于控制器作用域來說，這個作用域屬于一個子級作用域，所以，如果它想綁定控制器中的變量值，必須添加$parent標識，只有這樣才能訪問到控制器中的變量。
因此，解決ng-if中ng-model值無效的問題，主要方法就是在綁定值時添加$parent標識，或者用ng-show指令代替ng-if指令，這兩種方法都可以達到同樣的頁面效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了淺談Angular路由復用策略，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本文主要給大家匯總了一下angular.element的方法，十分的詳細，這里推薦給大家 參考下。2015-01-01
本篇文章主要介紹了詳解angularjs 學習之 scope作用域，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
幾乎每個web應用都會用到表單，那么驗證器就是必不可少的東西，這篇文章主要介紹了angular 實現同步驗證器跨字段驗證的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
這篇文章主要介紹了AngularJS實現的錨點樓層跳轉功能,涉及AngularJS事件響應實現錨點跳轉功能的相關操作技巧,需要的朋友可以參考下2018-01-01
本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了Angular應用Bootstrap過程步驟邏輯詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
angularJs復選框checkbox選中進行ng-show顯示隱藏的方法
今天小編就為大家分享一篇angularJs復選框checkbox選中進行ng-show顯示隱藏的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家簡單介紹了Angular.js如何從PHP讀取后臺數據，本文將Angular和PHP相結合，從后臺讀取數據，感興趣的小伙伴們可以參考一下2016-03-03
利用Angular+Angular-Ui實現分頁（代碼加簡單）
這篇文章主要介紹了利用Angular+Angular-Ui實現分頁，利用Angular+Angular-Ui實現的分頁分頁代碼更加簡單，更加容易懂哦，相信本文的內容對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03