AngularJS下拉列表动态获取

因项目需求，接触到angularjs相关前端框架使用，项目中前端交互中需要实现数据增加与编辑。

1、数据增加。弹出相应模态框后，会进行该数据某些类型下拉列表数据获取，在angular的controller中直接通过数据获取接口获取相关类型数据，通过$scope.lists = data绑定到ng-modal = "type"的下拉列表，通过ng-options="li.type_name for li in lists"进行遍历并显示类型名称。此时在页面选中的实际是type = li，即是一个遍历对象。而并非li.type_name这个对象属性。在controller中可通过type.xx属性值来获取需要的值。

2、数据编辑。点击编辑之后，弹出编辑模态框。在模态框中点击上级类型之后，动态显示模态框中上级类型对应的某条数据。相应的上级类型与所属上级类型的数据均会直接在列表中显示，并且在选择新的上级类型与上级条目名之后，动态绑定相应数据。同样的，首先显示上级类型所有数据ng-modal = "p_type"，通过ng-options="li.type_name for li in lists"进行遍历并显示上级类型名，然后将当前编辑数据的上级类型值初始化给p_type， $scope.p_type = p_type，当然这个p_type是通过指定条件遍历后将遍历对象赋值给$scope.p_type的。切记是遍历的某个对象而不是对象属性值，除非你在option标签中使用ng-repeat。切记，在select使用ng-init="p_type=XX"的方式无效，这个原因我也没有仔细去研究过，但确实是无效的。XX是遍历的某个确定对象。或许是angular版本差异带来的问题，我查阅其他许多angularjs相关博客，有的说该方式可行，但我在1.5.6版本中确实不行，这一点有兴趣的可以再确认一下。

3、这个时候上级类型数据已经有了，但是依旧需要显示上级数据，通过数据接口查询上级类型下的所有数据条目，重复2中的初始化赋值即可。

4、在当上级类型选择发生改变时，上级数据的条目也会相应的发生改变，这个时候需要使用到ng-change="change_p_type()"，会使得上级类型数据发生改变。

5、建议使用默认<option value="">请选择上级类型</option>，value=""也十分有意义，在你给select中的p_type=""时，会默认选择value=""的选项。否则会显示空白。

第一次发表博客，没有图片，下次把图片给补上。