Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

   <title>Title</title> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margin-left: 5px; } th,td{ border: 1px solid #000; padding: 10px; } table{ text-align: center; width: auto; border-collapse: collapse; } button{ margin-top: 10px; margin-bottom: 10px; }  <div style="width: 1000px">  选择城市北京<a style="color:transparent">来源gao*daima.com搞@代#码网</a>上海天津重庆 选择状态发货已发货 开始月份8910 -  结束月份8910</div><button>新增订单</button><button>批量删除</button><table> <thead> <tr style="background: #4404"> <th></th><th>id<button class="sspan">排序</button></th><th>商品名</th><th>用户名</th><th>手机号</th><th>价格<button class="sspan">排序</button></th><th>城市</th><th>下单时间<button class="sspan">排序</button></th><th>状态</th></tr></thead><tbody> <tr> <td></td><td>{{$index+1}}</td><td>{{item.commodity}}</td><td>{{item.name}}</td><td>{{item.phone}}</td><td>{{item.price}}</td><td>{{item.city}}</td><td>{{item.order}}</td><td> {{item.state}} </td></tr></tbody></table><div style="margin-left: 200px"> <h1>添加</h1> <div id="email-group"> <label for="email">E-mail:</label><p> <span style="color: red"> <span>*请输入邮箱</span><span>*请输入正确的email地址</span></span></p></div><div id="name-group"> <label for="name">昵称：</label><p> <span style="color: red"> <span>*请输入姓名</span></span></p></div><div id="password-group"> <label for="password">密码：</label><p> <span style="color: red"> <span>*密码长度不小于6</span><span>*密码长度不超过20</span></span></p></div><div id="passwordagaingroup"> <label for="passwordagain">再输入一遍密码：</label><p> <span style="color: red"> <span>*两次密码输入不一致</span></span></p></div><button type="submit" class="btn btn-success"> 提交<span class="fa fa-arrow-right"></span></button></div>