如何将原生简单下拉选择框改造为使用AngularJS数据数组实现？

嘿，我来帮你搞定这个AngularJS下拉框改造的问题！你现在的情况是有个空的原生select，想换成用AngularJS的数组数据来生成选项对吧？其实完全不用写原生JS去手动加option，用AngularJS自带的指令就能轻松搞定，咱们一步步来：

首先，咱们得把选项数据放到AngularJS的控制器里，而不是单独的script标签里，这样才能和视图绑定起来。然后用AngularJS的ng-options指令自动生成下拉选项，再用ng-model绑定选中的值，既符合AngularJS的模式，也更易维护。

给你看改造后的完整代码：

HTML部分 #

<div ng-controller="myController as vm">
    <select name="items" id="items" ng-model="vm.selectedItem" ng-options="opt.value as opt.text for opt in vm.options">
        <!-- 无需手动编写option，ng-options会自动生成 -->
    </select>
</div>

AngularJS控制器部分 #

angular.module('yourAppName', [])
.controller('myController', function() {
    var vm = this;
    // 将选项数组挂载到控制器的vm对象上，供视图访问
    vm.options = [
        { value: '1', text: 'Option 1' },
        { value: '2', text: 'Option 2' },
        // 可以在这里继续添加更多选项
    ];
    // 如果需要默认选中某一项，直接给selectedItem赋值对应value即可
    vm.selectedItem = '1';
});

再给你拆解下关键细节：

• ng-options="opt.value as opt.text for opt in vm.options"：这个指令会遍历vm.options数组，把每一项的value作为option的value属性，text作为显示文本，自动帮你生成所有option标签。
• ng-model="vm.selectedItem"：用来绑定用户选中的选项值，你在控制器里通过vm.selectedItem就能随时拿到当前选中的内容，非常方便。
• 把选项数组放到控制器里，能保证数据在AngularJS的作用域内，避免全局变量污染，也符合AngularJS的MVC设计思路。

要是你还没定义AngularJS模块，别忘了先创建一个（比如代码里的yourAppName，可以换成你自己的模块名）；要是页面里已经有模块了，直接把控制器加到已有模块上就行。

备注：内容来源于stack exchange，提问作者KeithViking