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、建议使用默认,value=""也十分有意义,在你给select中的p_type=""时,会默认选择value=""的选项。否则会显示空白。


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

你可能感兴趣的:(angularJS)