解决 angularjs 数据绑定无法获取值的问题

在使用angularjs的时候可能会出现通过$scope获取不到通过ng-mode绑定的表单元素的值,这可能是多种原因造成的,笔者遇到的情况大致如下:

代码示例

  • template
<div ng-repeat="kind in kinds">
    <label class="i-checks">
        <input type="radio" ng-model="kind" ng-value="{{ kind.id }}"><i></i> {{ kind.name }}
    </label>
</div>
  • controller
console.log($scope.kind);
  • template中触发了某个事件后执行到controller中的代码时打印出来的$scope.kind在不论单选框是否选中的情况下都是undefined

问题根源

radiong-model位于ng-repeat中,ng-repeat会创建自己的scope,所以在controller中通过$scope.kind获取的并不是ng-repeat中的kind而是全局的,但是全局的kind并没有定义。

解决办法

template中的ng-model="kind"调整为ng-model="$parent.kind"即可,完整的template代码为:

<div ng-repeat="kind in kinds">
    <label class="i-checks">
        <input type="radio" ng-model="$parent.kind" ng-value="{{ kind.id }}"><i></i> {{ kind.name }}
    </label>
</div>

本文首发于公众号:programmer_cc,转载请注明出处。


微信公众号.jpg

推荐阅读更多精彩内容