AngularJS ng-if ng-repeat下使用ng-model

因为ng-if, ng-repeat 会创建新的scope, 在ng-if 内使用ng-model, 需要加上$parent, 例如:$parent,.newVal, 才能在全局的scope中用$scope.newVal访问。


实例如下:

HTML 文件:

<pre name="code" class="html">
                    <pre name="code" class="html"> <div class="col-lg-8" ng-init="isShow = true">
       <input type="text" class="form-control input-checkbox" id="inputTest" ng-model="newVal" ng-if="isShow" >
        <input type="button" value="test" ng-click="getVal()" />
 </div><span style="font-family: Arial, Helvetica, sans-serif;">                          	</span>
 
 


JS 文件:

 $scope.getVal = function(){
            console.log($scope.newVal);
}

在text框中输入值test, 点击button, 输出为 : undefined


该ng-model 为$parent.newVal: 

<div class="col-lg-8" ng-init="isShow = true">
      <input type="text" class="form-control input-checkbox" id="inputTest"
             ng-model="$parent.newVal" ng-if="isShow" >
      <input type="button" value="test" ng-click="getVal()" />
</div>

在text框中输入值test, 点击button, 输出为:test

所以在ng-if 内使用ng-model, 需要加上$parent, 例如:$parent,.newVal, 才能在全局的scope中用$scope.newVal访问。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值