ng-if 下ng-model失效 ng-repeat循环输出单选框

 与其他指令一样，ng-if指令也会创建一个子级作用域，因此，如果在ng-if指令中添加了元素，并向元素属性增加 ng-model指令，
那么ng-model指令对应的作用域属性子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数据绑定时，需要引起注意。

 在ng-if方式中，每个包含的元素都拥有自己的作用域，因此，复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说，这个作用域属于一个子级作用域，所以，如果它想绑定控制器中的变量值，必须添加$parent标识，只有这样才能访问到控制器中的变量。

        因此，解决ng-if中ng-model值无效的问题，主要方法就是在绑定值时添加$parent标识，或者用ng-show指令代替ng-if指令，这两种方法都可以达到同样的页面效果。

http://blog.csdn.net/u013451157/article/details/60866210

<p  ng-if="a">
     第一个ngif---{{obj.xx}}      
     <br/>
     <br/>
 <span ng-repeat="x in arry">
      <input type="radio" name="num" ng-value="x.num" ng-model="$parent.obj.xx"  />{{x.num}}
 </span>
 </p>

 <p ng-if="b">
     第二个ngif--{{obj.xx}}
 </p>

 <p>选中的数字：{{obj.xx}}</p>

<button ng-click="showtime()"> 输出数字</button>


js部分

var app = angular.module('app1', []);
app.controller('c1', function ($scope) {
    
    $scope.a=true;
    $scope.b=true;
    
    $scope.arry=[
        {
            'id':'liu',
            num:965

        },{
            'id':'luke',
            num:562
        },{
            'id':'jack',
            num:326
        }
    ];
    
//这里本来只需要定义一个 $scope.obj={}的对象其实就可以了，
我这里是让单选框默认选择最后一个单选框为选中状态所以就将ng-model中的xx赋值为json数组最后num中的数字值了
    $scope.obj={
        xx:$scope.arry[$scope.arry.length-1].num
    };

    $scope.showtime=function(){
        
        console.log("输出数字："+$scope.obj.xx);

    }
   

});

上面三个obj.xx值虽然在不同的ngif下他们的值也是一样绑定了

截图效果：
1.开始默认最后一个单选框选中

2.再次点击其他单选框，他们的值就绑定了

2

 

笔记做完了！有问题或者其他方法，望各位大神指点！