min的josn

最新推荐文章于 2024-05-02 16:26:38 发布
最新推荐文章于 2024-05-02 16:26:38 发布
阅读量240 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： josn 文章标签： josn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/F846368440/article/details/79102611
<style>
tbody tr:nth-child(even){
background-color: paleturquoise;
}
tbody tr:nth-child(odd){
background-color: lightcyan;
}
</style>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.kong=false;
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(pro){
$scope.products=pro.data;
});
$scope.getage=function(birth){
var q=new Date(birth).getYear();
var w=new Date().getYear();
return w-q;
}
//搜索
$scope.search="";
//删除
$scope.delProduct=function(clumn){
var arr=[];
if(confirm("您确定删除吗")){
for (index in $scope.products) {
if($scope.products[index].id==clumn){
$scope.products.splice(index,1);
}
}
}
}
//批量删除
$scope.delete=function(){
if(confirm("您确定删除吗")){
for (var i=0;i<$scope.products.length;i++) {
if($scope.products[i].state==true){
$scope.products.splice(i,1);
i--;
}
}
if($scope.products.length==0){
$scope.kong=true;
}
}
}
//全选反选
$scope.select=function(){
for (var i in $scope.products) {
$scope.products[i].state=$scope.selectAll;
}
}
//减一
   $scope.less=function(id){
    for (index in $scope.products) {
    if($scope.products[index].id==id){
    if($scope.products[index].num>1){
    $scope.products[index].num--;
    }else{
    if(confirm("你确定删除吗")){
    $scope.products.splice(index,1);
    }
    }
    }
    }
   }
   //添加
  $scope.isshow=false;
$scope.add=function(){
$scope.arr=[];
var id=0;
for(index in $scope.pros){
if($scope.pros[index].id>id){
var id=$scope.pros[index].id
}
}
var newid=id+1;
var newname=$scope.add_name;
if(newname=="" || newname==undefined){
$scope.arr.push(1);
$scope.nn=("员工姓名不能为空");
}else{
$scope.nn="";
}
var newmoney=$scope.add_money;
if(newmoney=="" || newmoney==undefined){
$scope.arr.push(2);
$scope.ss=("员工薪资不能为空");
}else{
$scope.ss="";
}
var newgender=$scope.add_gender;
if(newgender=="" || newgender==undefined){
$scope.arr.push(3);
$scope.gg=("员工性别不能为空");
}else{
$scope.gg="";
}
var newbirthday=$scope.add_birthday;
if(newbirthday=="" || newbirthday==undefined){
$scope.arr.push(4);
$scope.bb=("出生日期不能为空");
}else{
$scope.bb="";
}
var obj;
if($scope.dname=="" || $scope.dname==undefined){
$scope.arr.push(5);
$scope.dd=("部门不能为空")
}else if($scope.dname=="市场部"){
obj={id:1,name:$scope.dname};
$scope.dd="";
}else if($scope.dname=="研发部"){
obj={id:1,name:$scope.dname};
$scope.dd="";
}
if($scope.arr.length==0){
$scope.products.push({
id:newid,
name:newname,
gender:newgender,
salary:newmoney,
birthday:newbirthday,
department:obj
});
$scope.isshow=false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入姓名" ng-model="search"/>
<select ng-model="xzpx">
<option value="">薪资排序</option>
<option value="+salary">升序</option>
<option value="-salary">降序</option>
</select>
<br />
<button ng-click="delete()">批量删除</button>
<button ng-click="isshow=true">添加</button>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
   <th><input type="checkbox" ng-click="select()" ng-model="selectAll"></th>
   <th>员工编号</th>
<th>姓名</th>
<th>年龄</th>
<th>薪资</th>
<th>性别</th>
<th>日期</th>
<th>部门</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in products | filter:{name:search} | orderBy:xzpx">
<td><input type="checkbox" ng-model="pro.state"></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{getage(pro.birthday)}}</td>
<td>
<button ng-click="less(pro.id)">-</button>
<span ng-hide="xg">
{{pro.salary | currency:"￥"}}</span>
<span ng-show="xg"><input type="text" ng-model="pro.salary"><button ng-click="xg=false">保存</button></span>
                        <button ng-click="pro.salary=pro.salary+1">+</button>
</td>
<td><span ng-hide="xg">{{pro.gender}}</span><span ng-show="xg"><input type="text" ng-model="pro.gender"><button ng-click="xg=false">保存</button></span></td>
<td>{{pro.birthday | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>{{pro.department.name}}</td>
<td><button ng-click="xg=true">修改</button></td>
<td><button ng-click="delProduct(pro.id)">删除</button></td>
</tr>
</tbody>
</table>
<p ng-show="kong">无操作数据</p>
<form ng-show="isshow">
<input type="text" placeholder="员工姓名" ng-model="add_name"/><span ng-if="nn.length!=0">{{nn}}</span><br/>
<input type="text" placeholder="员工薪资" ng-model="add_money"/><span ng-if="ss.length!=0">{{ss}}</span><br/>
<input type="radio" value="男" ng-model="add_gender"/>男
<input type="radio" value="女" ng-model="add_gender"/>女
<span ng-if="gg.length!=0">{{gg}}</span><br/>
<input type="date" placeholder="出生日期" ng-model="add_birthday"/><span ng-if="bb.length!=0">{{bb}}</span><br/>
<select ng-model="dname">
<option value="">请选择部门</option>
<option value="研发部">研发部</option>
<option value="市场部">市场部</option>
</select>
<span ng-if="dd.length!=0">{{dd}}</span><br />
<button ng-click="add()">保存</button>
</form>
Anguler入门开发
Jack汪喆的技术分享栏
09-17 963
进行一下简单的Angular入门，开发第一版股票管理系统的静态页面布局。 一.Angular程序架构 Parent component:组件是Angular应用的基本构建块，你可以把一个组件理解为一段带有业务逻辑和数据的HTML Service1：服务用来封装可重用的业务逻辑 指令：允许你向HTML元素添加自定义行为 模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元 ...
fis3+anglurjs项目源码以及配置文件全解
11-18
fis3+anglurjs项目源码以及配置文件全解
Angular学习总结-入门篇
小冷在努力~
12-06 1万+
目录 一、Angular介绍 二、 学习Angular必备基础 三、 Angular环境搭建 四、 Angular创建项目 五、 Angular环境搭建以及创建项目的时候可能遇到的错误 六、Angular开发工具介绍 Angular项目结构介绍 创建组件/服务 angular语法 变量 ngFor循环+ngIf判断+ngSwitch 动态修改样式ngClass+ngStyle 双向数据绑定 管道(Pipe) 获取dom节点 ng...
1.anglurJS常用指令,自定义指令,连接代码块,控制器学习
hanchuang_hc的博客
02-21 558
我的第一篇博客
angular快速入门教程
h5_since的博客
03-10 1万+
angular快速入门
Angular基本概念及用法总结
weixin_44801414的博客
07-27 5755
本文将用最简约的语言介绍angular的基本概念及相关快捷指令等，便于开发者快速入门学习以及日常工作中的使用。（ps笔记内容源于b站学习资源观后整理及个人总结。）selector'./myc01.component.html'，//或template}(3)使用已经注册过的组件(任意一个dom里，除了自己)...
Josn核心Jar包解析及其JS文件应用
6. **xpp3_min.jar** - XPP3是一个XML Pull Parser库，它也支持JSON的解析和生成。XPP3以其小巧和性能优秀而受到青睐。它可以快速地处理大量的XML和JSON数据，尤其是当数据量很大时，XPP3仍然能保持良好的性能。 ...
josn和图像、标签缩放
02-27
假设这些数据是以[x_min,y_min,x_max,y_max]的形式存在，则可以通过乘以相应的缩放因子来进行转换。 ```json { "objects": [ { "name": "object_name", "bbox": [x_min, y_min, x_max, y_max] } ] } ``` ...
yolov5 josn转txt原理、
03-16
比如，假设JSON中有一个边界框的左上角坐标(x_min, y_min)和宽高(width, height)，需要将其转换为YOLO格式的中心点(x_center, y_center)以及归一化的宽和高。这时候需要用到公式：x_center = (x_min + width/2) / ...
yolov5 josn格式转换txt
07-12
line = f"{class_id} {x_min} {y_min} {x_max} {y_max}\n" f.write(line) ``` 5. 调用函数并提供JSON文件路径和输出txt文件路径作为参数： ```python json_to_txt('path/to/input.json', 'path/to/output.txt') ...
roboflow标注josn格式是啥样子的
最新发布
04-27
x_min, y_min, width, height = coco_bbox center_x = (x_min + width / 2) / img_width center_y = (y_min + height / 2) / img_height w_norm = width / img_width h_norm = height / img_height return f"{...
AnglurJS 服务的基本使用
mayn666的博客
12-08 805
angular服务         概念：         angular的服务就是一个函数，或者对象。                 使用步骤：         1.放入控制器         -->                  var mo = angular.module("myApp",[]); mo.controll
Angular基础-搭建Angular运行环境
踏雨歌青春，诗酒趁年华
05-02 9276
这篇文章介绍了在Angular项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Angular CLI工具、安装angular-router、创建Angular项目等步骤。这篇文章为读者提供了清晰的指南，帮助他们快速搭建Angular开发环境，为后续的项目开发奠定基础。
anglurjs操作单选框传递id以及全选、全不选
寨板p45黑苹果10.12.6
04-24 359
<td><input type="checkbox" class="eachbox" ng-click="updateSelection($event,entity.id)"></td> $event：获取当前触发事件的元素，这里获取的是input元素 $event的target属性是给当前元素赋予的类型的属性，即给input赋予checkbox的属性chec...
Anglurjs之弹出模态框
weixin_40597041的博客
08-14 422
实现功能：新增弹出模态框，编辑弹出模态框，并将主页面数据带到模态框，保存提交表单。 主要有几个点，怎么将模态框显示出来，怎么传参，怎么获取模态框中文本框的值，编辑时文本框怎么带入值 说得再多都不如代码直观。 下面是html页面 &lt;button class="btn m-b-xs btn-sm btn-primary btn-addon" data-toggle="modal" da...
angular框架简介基础与使用（全文2w8字）前端框架angular
热门推荐
几百块的博客
05-02 2万+
angular作为一个完整的框架，模块化做的特别好。内置的路由，httpclient，rxjs，除了界面相关的组件库，几乎可以不用任何第三方工具库就可以完成一个spa项目。对typescript支持非常好，或者说只有typescript以一个选择。Angular是三大巨头中，框架版本升级最容易的，虽然目前在国内不是特别火。...
【angular】angular框架介绍
北平～
04-21 3601
是什么？ 什么是框架？众所周知，就是一种实现的结构，从程序员的角度看，前端框架是一种特殊的、已经实现了的web应用，我们只需要对他进行具体的业务逻辑的填充即可，由框架根据具体的业务逻辑来调用代码的执行。angular就是一个这样的JavaScript框架。 angular的七个核心概念 模块：用来进行文件的切分，保证JavaScript文件引入顺序，来正确加载相应的类库。 指令：为特定的DOM元素...
Angular-开发环境搭建
kenadc的博客
04-11 256
nodejs下载地址:https://nodejs.org/zh-cn/download/ Angular官网地址:https://angular.cn/tutorial/toh-pt3 1.百度nodejs官网下载安装,一路next即可 2.检验nodejs安装是否成功 cmd执行命令: node -v npm -v 3.npm安装angular cmd执行命令: npm install -g @angular/cli 4.创建新项目: 在磁盘新建一个文件及为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值