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