angularjs select中ng-repeat和ng-options的区别及选中问题

最近是项目中用到了angularjs的select标签，由于是初次学习摸索使用，故在此过程中遇到了一些坑，在此总结出来，供大家一起学习，探讨。

首先定义一个下拉数组供说明使用：

var optItems1 = [{id:1,text:'武汉'},{id:2,text:'北京'},{id:3,text:'杭州'}];

var optItems2 = [{id:'1',text:'武汉'},{id:'2',text:'北京'},{id:'3',text:'杭州'}];

一、使用ng-repeat实现下来，代码如下：

(1)、<select ng-model="query.city">

<option value=""></option>

<option ng-repeat="x in optItems1" value="{{x.id}}">{{x.text}}</option>

</select>

(2)、<select ng-model="query.city">

<option value=""></option>

<option ng-repeat="x in optItems2" value="{{x.id}}">{{x.text}}</option>

</select>

二、使用ng-options实现下拉，代码如下：

（1）、<select ng-model="query.city" ng-options="x.id as x.text for x in optItems1">

<option value=""></option>

</select>

(2)、<select ng-model="query.city" ng-options="x.id as x.text for x in optItems2">

<option value=""></option>

</select>

注意：以上代码不注意看似是没有啥区别，实际是optItems1中的id值未number类型，而optItems2的id类型值类型为String类型，这就是要说明的两个问题了。

问题1：当我们初始化赋值时，如果java实体类中city字段的类型为number类型时，方式一（使用ng-repeat方式实现）的（1）和（2）都可以正常赋值，但是方式二（使用ng-options方式实现）的就只有（1）能够正常赋值。如果想要能够正常赋值，可以按以下方式进行即可，代码如下：

//字符串转int类型

$scope.convertToInt = function (str) {

return parseInt(str);

};

<select ng-model="query.city" ng-options="convertToInt(x.id) as x.text for x in optItems2">

<option value=""></option>

</select>

问题2：方式1（ng-repeat实现）angularjs在加载时会默认给一个空的option,但是当你给ng-model赋值后，由于你自己加了一个空的option，此时就会出现双留白，但是要自己不加空的option,当你给ng-model赋值后，就没有空的option了，这个问题很是让人头疼，暂时没有找到为什么。但是使用方式二（ng-options实现）就没有这个问题，所以最终整个项目中都选择了该方式。

综上可知，两种方式实现都有自己的不足，欢迎大家一起探讨，指出。