AngularJS解決ng-if中的ng-model值無效的問題
更新時(shí)間：2017年06月21日 11:46:23 作者：abloume
本篇文章主要介紹了AngularJS解決ng-if中的ng-model值無效的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
與其他指令一樣，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á)到同樣的頁面效果。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular 容器部署的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了angularjs中的e2e測試實(shí)例,本文使用Protractor來完成e2e測試,需要的朋友可以參考下2014-12-12
Angular模版驅(qū)動(dòng)表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動(dòng)表單的使用總結(jié)，本文實(shí)現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗(yàn)，狀態(tài)管理，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了使用Angular CLI從藍(lán)本生成代碼詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
深入理解Angularjs中$http.post與$.post
本篇文章主要介紹了深入理解Angularjs中$http.post與$.post ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了angularJS提交表單（form）的方法和示例,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了highcharts 在angular中的使用示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
angular.js實(shí)現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實(shí)現(xiàn)列表orderby排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
使用yeoman構(gòu)建angular應(yīng)用的方法
下面小編就為大家?guī)硪黄褂脃eoman構(gòu)建angular應(yīng)用的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時(shí)間實(shí)例
本篇文章主要介紹了詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時(shí)間實(shí)例 ，有需要的小伙伴可以參考下。2017-02-02