解决 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。

问题根源

radio的ng-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