angularJs实现增删改查示例1-列表查询界面
程序开发
2023-09-03 16:51:59
先上效果图:
*************************************以下是代码截图**************************************
因为前端代码贴过来很多都直接变成前端组件了,所以直接截图 1、导入的js、css引用,以及angularJs需要注意的地方,如:ng-app="" 与 ng-controller=""
2、查询列表:这里做的是级联下拉,使用的是ng-options=""来初始化下拉列表数据的。
简要逻辑:1)、通过angularJS页面初始化指令ng-init=""内的方法来调用JS查询方法
2)、JS查询方法发送请求从后台获得各种数据(如:下拉数据、列表数据等)。
3)、JS查询方法将获得的各种数据封装给各自的对象(例如:下拉数据对象:vm.productLists和vm.planjson;列表数据对象:vm.items )
3、按钮栏。 注:页面 初始化指令:ng-init=""(前面已介绍)
4、查询列表标题行。
5、查询列表数据行。 逻辑:1)、ng-init=""初始化指令方法调用js查询方法向后台发送请求,获取各种查询页面的初始化数据(包含查询页面列表数据) 2)、js查询方法获取到列表数据后封装给vm.items对象
3)、页面通过ng-repeat=""接收js封装的vm.items对象,并进行逐行解析。
注:下图代码存在单选列和隐藏值
6、分页
*************************************以下是代码截图**************************************
因为前端代码贴过来很多都直接变成前端组件了,所以直接截图 1、导入的js、css引用,以及angularJs需要注意的地方,如:ng-app="" 与 ng-controller=""
3、按钮栏。 注:页面 初始化指令:ng-init=""(前面已介绍)
4、查询列表标题行。
5、查询列表数据行。 逻辑:1)、ng-init=""初始化指令方法调用js查询方法向后台发送请求,获取各种查询页面的初始化数据(包含查询页面列表数据)
6、分页
标签:
相关文章
-
无相关信息