angularjs 下拉框
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>货位档案</title>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/angularJs")
</head>
<body>
<div class="container-fluid" ng-app="myApp" ng-controller="LocationController">
<div class="row">
<div class="col-xs-11 table-responsive">
<table class="table table-bordered table-condensed" style="table-layout:unset;">
<tr>
<td colspan="17" style="text-align:center;border:none"><h2>货位档案</h2></td>
</tr>
<tr>
<td style="border:none" colspan="2"><input type="text" class="form-control" placeholder="请输入查询条件" value="" ng-model="searchstr" /></td>
<td style="border:none"></td>
<td colspan="14" style="border:none;text-align:right"><button type="button" class="btn btn-success btn-md" ng-click="btnAdd()"> 添 加 </button></td>
</tr>
<tr>
<th style="width:90px;">货位编码</th>
<th>货位名称</th>
<th style="width:120px;">所属仓库</th>
<th>备注</th>
<th>部门</th>
<th>部门ID</th>
<th>公司</th>
<th>公司ID</th>
<th>建档人</th>
<th>建档日期</th>
<th>编辑</th>
<th>删除</th>
</tr>
<tr ng-repeat="record in info | filter:searchstr">
<td>{{record.Id}}</td>
<td>{{record.Name}}</td>
<td>{{record.warehouseName}}</td>
<td>{{record.Remark}}</td>
<td>{{record.Department}}</td>
<td>{{record.DepartmentId}}</td>
<td>{{record.Company}}</td>
<td>{{record.CompanyId}}</td>
<td>{{record.CreateBy}}</td>
<td>{{record.CreateDate}}</td>
<td style="width:70px"><button type="button" class="btn btn-info btn-xs" ng-click="btnEdit(record)"> 编 辑 </button></td>
<td style="width:70px"><button type="button" class="btn btn-danger btn-xs" ng-click="btnDelete(record)"> 删 除 </button></td>
</tr>
</table>
@*-------------------------------------货位案模态框-----------------------------------------*@
<div class="modal fade" id="personchoose">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">请填写货位档案信息</h4>
</div>
<div class="modal-body">
<table class="table table-bordered">
<tr>
<td style="width:90px">货位名称</td>
<td><input class="form-control" type="text" name="name" ng-model="source.Name" /></td>
<td style="width:80px">所属仓库</td>
<td>
<select class="form-control" ng-options="y.Id as y.Name for (x, y) in companyDepts" ng-model="warehouse"></select>
</td>
</tr>
<tr>
<td>备注</td>
<td colspan="3">
<input class="form-control" type="text" name="name" ng-model="source.Remark" />
</td>
</tr>
<tr>
<td>建档人</td>
<td><input class="form-control" type="text" name="name" ng-model="source.CreateBy" /></td>
<td style="width:80px">建档日期</td>
<td><input class="form-control" type="date" name="name" ng-model="source.CreateDate" /></td>
</tr>
</table>
<table class="table" style="border:none">
<tr>
<td style="text-align:right"><button type="button" class="btn btn-primary btn-md" ng-click="btnSave()"> 保 存 </button></td>
<td style="width:60px;"><button type="button" class="btn btn-default btn-md" ng-click="btnCancel()"> 取 消 </button></td>
</tr>
</table>
<div class="alert alert-success" role="alert" style="text-align:center" ng-show="!showmsg == ''">{{showmsg}}</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@*-------------------------------------货位模态框end-----------------------------------------*@
@*-------------------------------------编辑模态框-----------------------------------------*@
<div class="modal fade" id="deletecom">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">确定要删除吗？</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" ng-click="delcom()">确认</button>
<div class="alert alert-success" role="alert" style="text-align:center" ng-show="!delmsg == ''">{{delmsg}}</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@*-------------------------------------编辑模态框end-----------------------------------------*@
</div>
</div>
</div>
<script>
//日期格式
//json日期格式转换为正常格式
function jsonDateFormat(jsonDate) {
try {
var date = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var milliseconds = date.getMilliseconds();
return date.getFullYear() + "-" + month + "-" + day;
// return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + "." + milliseconds;
} catch (ex) {
return "";
}
}
//主程序
var myApp = angular.module('myApp', []);
//数据控制器
myApp.controller('LocationController', function ($scope, $http, $timeout) {
//初始化提示消息
$scope.showmsg = '';
$scope.delmsg = '';
/*
$http.post("/GoodItem/GetData", {}, {}).success(function (response) {
response.CreateDate = jsonDateFormat(response.CreateDate);
response.IsBatch = response.IsBatch == "1" ? "是" : "否";
//绑定数据源
$scope.info = response;
});*/
//---------------------------------------------------------------------------
//刷新数据
$scope.GetData = function () {
$http.post("/Location/GetData", {}, {}).success(function (response) {
//绑定数据源
for (var i = 0; i < response.length; i++) {
response[i].CreateDate = jsonDateFormat(response[i].CreateDate);
}
$scope.info = response;
});
}
//点击添加按钮事件
$scope.btnAdd = function () {
$scope.state = 'add';
$('#personchoose').modal('show');
}
//保存数据
$scope.btnSave = function () {
$scope.source.WarehouseId = $scope.warehouse;
$http.post("/Location/SaveData", {}, { params: { "Location": $scope.source, "savetype": $scope.state } }).success(function (response) {
if (response) {
$scope.showmsg = '保存成功！';
$timeout(function () {
$scope.showmsg = '';
$scope.source = null;//清空数据
$('#personchoose').modal('hide');
}, 800); //该函数延迟1.5秒执行
}
else {
$scope.showmsg = '保存失败！';
$timeout(function () {
$scope.showmsg = '';
$('#personchoose').modal('hide');
}, 800); //该函数延迟1.5秒执行
}
$scope.GetData();
});
}
//编辑事件
$scope.btnEdit = function (item) {
item.CreateDate = new Date(item.CreateDate);
$scope.source = item;
$scope.warehouse = item.WarehouseId;
$scope.state = 'edit';
$('#personchoose').modal('show');
}
//取消按钮
$scope.btnCancel = function () {
$scope.source = null;
$('#personchoose').modal('hide');
$scope.GetData();
}
//删除按钮
$scope.btnDelete = function (item) {
$scope.delitem = item; //存值
$('#deletecom').modal('show');
}
//确认删除
$scope.delcom = function () {
$http.post("/Location/DeleteData", {}, { params: { "DeleteItem": $scope.delitem } }).success(function (response) {
$scope.delmsg = response;
$timeout(function () {
$scope.delmsg = '';
$('#deletecom').modal('hide');
}, 800); //该函数延迟1.5秒执行
$scope.GetData();//导入数据
});
};
$scope.GetData();//导入数据
//获取所属仓库
$http.post("/Location/GetWareHouse").success(function (response) {
$scope.companyDepts = response;
});
})
</script>
</body>
</html>
angularjs 下拉框的更多相关文章
- angularjs下拉框空白
搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" n ...
- angularjs下拉框实现渲染html
angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- angularjs 绑定多个属性到下拉框
绑定下拉框 angularjs 代码: //活动下拉切换 $scope.activityChange = function () { var cards = new Array(); var url ...
- table样式的下拉框（angularjs）
前言 虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架. 一:实现的样式 二:实现包括的功能点 1:下拉框内容是表格,类似于一个弹窗 表格内容最多六行,超出的显示滚动条,表头固定,可滚动 ...
- AngularJS（二）——常见指令以及下拉框实现
前言 学完AngularJS,总体上感觉没什么新鲜的东西,但是又感觉每一步都很新鲜,因为没有见过,又因为学到的语法函数和JavaScript差不多,本篇主要介绍一些AngularJS的指令,常见指令和 ...
- angularJs实现下拉框多选
话不多说,直接上干货. 肯定需要下拉选插件.必须引入的是 注意 先后顺序 select2.css select2-bootstrap.css select2.min.js angular.min. ...
- angularJs(2)表单中下拉框单选多选
多选 <input type="checkbox" ng-model='game' ng-true-value="1" ng-false-value=&q ...
- AngularJS 多级下拉框
<div ng-app="MultiDropDownApp" ng-controller="MultiDropDownControl as vm"> ...
随机推荐
- 三分之一的程序猿之社交类app踩过的那些坑
三分之一的程序猿之社交类app踩过的那些坑 万众创新,全民创业.哪怕去年陌生人社交不管融资与否都倒闭了不知道多少家,但是依然有很多陌生人社交应用层出不穷的冒出来.各种脑洞大开,让人拍案叫起. 下面我们 ...
- UVa 10917 Dijkstra
本来就是水题一道. 题意:一个人要从点1去到点2,中间还有很多点和很多条边.问你如果他每次走的边(a,b)都满足:a点到目标点的最短距离<b点到目标点的最短距离,那么他从点1出发到点2总共有多少 ...
- winfrom 文字滚动
winfrom 文字滚动 http://www.codeproject.com/Articles/6913/Creating-a-professional-looking-GDI-drawn-cust ...
- ThreadLocal是什么?保证线程安全
早在JDK 1.2的版本中就提供Java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程程序. 当使 ...
- JS IOS/iPhone的Safari不兼容Javascript中的Date()问题
var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比 ...
- Python基础之条件和循环
阅读目录 一.if语句 1.1功能 1.2语法 1.2.1:单分支,单重条件判断 1.2.2:单分支,多重条件判断 1.2.3:if + else 1.2.4:多分支if + elif +else 1 ...
- Java程序的编码规范
所有的程序开发手册都包含了各种规则.一些习惯自由程序人员可能对这些规则很不适应,但是在多个开发人员共同写作的情况下,这些规则是必需的.这不仅仅是为了开发效率来考虑,而且也是为了后期维护考虑. 一.命名 ...
- 在AngularJS中同一个页面配置一个或者多个ng-app
在AngularJS学习中,对于ng-app初始化一个AngularJS程序属性的使用需要注意,在一个页面中AngularJS自动加载第一个ng-app,其他ng-app会忽略, 如果需要加载其他ng ...
- HTML标签显示在页面上
用 <xmp></xmp> 标签包起来,里面的所有文字会原样显示出来 <xmp><P>1</P><div>2</div&g ...
- 关于php的开源
这里的开源是指编写php的C语言的源代码是开放的,你可以下载下来c源代码去修改然后重新编译连接得到自己的程序. 比如php不支持多线程一直是广为被人所诟病的,你也可以让它变相的支持多线程,比如face ...