angular ng操控属性
又掉了一个坑这里来说说ng-value=”xxx”与value=闲话少说,看范例
<select id="choice_category" class="form-control" ng-model="current_category">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="{{category._id}}" ng-repeat="category in categorys" >{{category.name}}</option>
</select>
理论上current_category会与categorys中的元素进行对比 然后select会选中对比成功的option如果用ng-value=”category._id”那么神奇的事情发生了,option会平白无故的多出一条
<option value="? string:123?"></option>
然后select选择的是空也就是上面那个option,因为上面呢个option没有任何的元素其中详细的情况我也没去了解.个人理解如下
理解
因为current_category与categorys都是用ajax获取的,所以我设置了一个延迟来模拟网络的加载.
setTimeout(function(){
$scope.categorys=[{
_id:"56896be6a43fa3e02695c01a",
name:"56896be6a43fa3e02695c01a"
},{
_id:"568a6237a807cee863a8eb52",
name:"568a6237a807cee863a8eb52"
}]
},1000)
$scope.current_category="56896be6a43fa3e02695c01a"
这里我没用$timeout而用setTimeout一模拟发现情况是一模一样,但是把ng-value改为value=””则不会出现这种情况在这之前我还排查了是不是categorys数量太多而导致的,看来不是.下面就开始分析一下了
分析
简单来说就是current_category先更新了,categorys后更新并且没有$apply或者$apply在current_category复制更新的时候就调用了,或者就是current_category先更新了ng-repeat并没有循环完毕之类的情况,等等等等
我也说不清具体是啥情况 只能猜了
情况1
tcp是块传输的,那么是不是先到的块就先给赋值了,如果categorys数量太多那么这个块肯定就在后面于是current_category块就先到了,于是angularJS就开始更新绑定的value然后ng-repeat循环并没有完成
情况2
ng-repeat已经开始循环了,但是current_category并没有得到值,或者说在ng-repeat循环完毕或者循环到一半的时候current_category就已经开始赋值了,但是ng-repeat并没有得到这个值,所以就选择不到那个option
情况3
参照情况2,单纯的value=””是可以的,angularJS在编译模板的时候对于ng-value与value=””模板处理机制不同所导致的.
个人觉得情况3比较可能…不过我也没去看源码深究,大家就看看吧~以后遇到这种情况可以换value=””试试