AngularJs ng-model绑定问题

最新推荐文章于 2019-08-08 14:03:00 发布

amanda_dan

最新推荐文章于 2019-08-08 14:03:00 发布

阅读量2.6k

点赞数

分类专栏： angularjs 文章标签： angularjs ng-model

本文链接：https://blog.csdn.net/amanda_dan/article/details/53672853

版权

angularjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<h2>一、单选radio</h2>
<h3>1.1 最简单radio</h3>
<div>
    <input type="radio" value="1" ng-model="selectValue"/>语文
    <input type="radio" value="2" ng-model="selectValue"/>数学
    <input type="radio" value="3" ng-model="selectValue"/>英语
</div>
<div>selectValue:{{selectValue}}</div>
<h3>1.2 因为ng-repeat的子scope无法关联ng-model的radio</h3>
<div>
    <label ng-repeat="rd in subjectlist">
        <input type="radio" ng-model="radioModelOfSubScope" value="{{rd.subjectCode}}" name="subjectRadio">{{rd.subjectName}}
    </label>
</div>
<span>无法得到此处"{{radioModelOfSubScope}}"的值,因为ng-repeat之间的东西都归属于子scope管理，不再属于全局$scope</span>
<div>radioModelOfSubScope:{{radioModelOfSubScope}}</div>
<h3>1.3 利用$parent关联ng-model的radio</h3>
<div>
    <label ng-repeat="rd in subjectlist">
        <!--以下两种写法value/ng-value等价-->
        <input type="radio" ng-model="$parent.radioModelOfGlobelScope" value="{{rd.subjectCode}}"  name="subjectRadio">{{rd.subjectName}}
        <!--<input type="radio" ng-model="$parent.radioModelOfGlobelScope"  ng-value="rd.subjectCode" name="subjectRadio">{{rd.subjectName}}-->
    </label>
</div>
<div>radioModelOfGlobelScope:{{radioModelOfGlobelScope}}</div>
<br/>
页面效果如下：