angular 的简单小应用增删查改
1.完成页面布局,如图所示。
2. 声明数据对象,初始化订单信息,数据自拟且不低于四条
3. 用ng-repaet指令将对象遍历并渲染到页面中。
4. 使用AngularJS过滤器实现搜索功能。在订单搜索框中,输入商品名称可以动态按商品名称进行查询列表信息;在输入框中输入用户手机号即可根据用户手机动态查询出符合要求的信息。
5. 用户可以根据订单状态过滤订单信息,订单状态有二种,分别是已发货,未发货。如:用户点击下拉菜单选择”已发货”则查询出已发货的所有订单。
6. 用户点击”未发货”按钮时此时状态改变为已发货状态,按钮变为绿色。
7. 实现订单批量删除功能。用户只能删除已发货订单,不能删除未发货订单,用户点击多个已发货订单时可以批量删除选中订单。
8. 订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列,再点击排序时则按倒序排列。
9. 订单列表中信息中价格前需要添加”¥:”,订单时间需要格式为:”月-日 时:分:秒”。
10. 添加订单信息。提交订单时,检查表单,提示错误内容,并且将文本框颜色变红色,如果表单有误则提交不成功,如果表单无误则提交成功,提交成功的信息在列表展示。
//解题思路
1.主要是建立两个数组,一个全局展示数组$scope.goods=[],一个原始数组var goo=[],所有操作都是对原始数组进行操作,之后赋值给原始数组;
2.改变视图的时候,在点击事件传送name值进行判断
3.数组中有两个代表true和false的值,一个是复选框的选择状态ischecked,一个是发货的状态zt,通过过滤器进行判断是否发货
4.查询框可以用键盘按下事件,也可以用改变事件,但是过滤器都是同一个,参数是一个自拟名,通过两个输出框进行赋值
记住要先给赋值为空,不然有点小毛病
//代码
id 商品名 用户名 手机号 价格 城市 下订单时间 状态 {{g.id}} {{g.gname}} {{g.name}} {{g.tel}} {{g.price|currency:"¥:"}} {{g.cs}} {{g.time|date:"MM-dd HH:mm:ss"}}
商品名{{s1}}
用户名{{s2}}
手机号{{s3}}
价格为{{s4}}
城 市{{s5}}
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!