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=””试试