本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考，具体如下： 项目中后台一个商品库，新建活动时动态选择所需商品
2017-10-25 15:30
1161 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../AngularJS/angular.js" ></script>
<script type="text/javascript" src="../AngularJS/angular-route.js" ></script>
<script>
var app = angular.module("myApp",['ngRoute']);
//配置路由
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/",{})
.when("/addOrder",{
controller:"addOrderCtrl",
templateUrl:"addOrder.html"
})
.otherwise({redirectTo:"/addOrder"});
}]);
app.controller("myCtrl",function($scope,$location){
//数据源
$scope.orders = [{
id:1,
goodName:"iPone4",
userName:"张三",
num:15555555555555,
price:4999.00,
city:"北京",
time:"08-01 10:00",
state:"发货"
},{
id:2,
goodName:"小米6",
userName:"李四",
num:155666666666666,
price:2999.00,
city:"上海",
time:"09-01 10:00",
state:"已发货"
},{
id:3,
goodName:"华为P9",
userName:"王五",
num:15577777777777,
price:3999.00,
city:"天津",
time:"10-01 10:00",
state:"已收货"
},{
id:4,
goodName:"OPPO R11",
userName:"赵六",
num:155888888888,
price:4999.00,
city:"重庆",
time:"11-11 10:00",
state:"发货"
}];
//定义跳转方法
$scope.goToPath = function(){
$location.path("/addOrder");
}
$scope.startTime = "开始月份";
$scope.endTime = "结束月份";
//过滤时间
$scope.filterTime = function(index){
//获得开始和结束月份
//获取当前订单的时间月份
var time = $scope.orders[index].time;
var month = parseInt(time.split("-")[0]);
if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
return true;
}else{
var start = parseInt($scope.startTime);
var end = parseInt($scope.endTime);
if(month >=start && month<=end ){
return true;
}else{
return false;
}
}
}
//更改状态
$scope.changeState = function(index){
$scope.orders[index].state = "已发货";
}
});
//添加订单控制器
app.controller("addOrderCtrl",function($scope){
$scope.goodName = "";
$scope.userName = "";
$scope.num = "";
$scope.city = "选择城市";
$scope.li1 = false;
$scope.li2 = false;
$scope.li3 = false;
$scope.li4 = false;
$scope.li5 = false;
$scope.li6 = false;
$scope.li7 = false;
$scope.sub = function(){
//判断商品名是否为空
if($scope.goodName == null || $scope.goodName == ""){
$scope.li1 = true;
}else{
$scope.li1 = false;
//判断商品名是否符合格式
if($scope.goodName.length <= 6 || $scope.goodName.length >= 20){
alert("asf")
$scope.li2 = true;
}else{
$scope.li2 = false;
}
}
//判断用户名是否为空
if($scope.userName == null || $scope.userName == ""){
$scope.li3 = true;
}else{
$scope.li3 = false;
//判断用户名是
4000
否符合格式
if($scope.userName.length <= 4 || $scope.userName.length >= 16){
$scope.li4 = true;
}else{
$scope.li4 = false;
}
}
//判断手机号是否为空
if($scope.num == null || $scope.num == ""){
$scope.li5 = true;
}else{
$scope.li5 = false;
//判断手机号是否符合格式
alert($scope.num.length);
if($scope.num.length == 11){
if(isNaN($scope.num)){
$scope.li6 = true;
}else{
$scope.li6 = false;
}
}else{
$scope.li6 = true;
}
}
//判断手机号是否符合格式
if($scope.city == "选择城市"){
$scope.li7 = true;
}else{
$scope.li7 = false;
}
if(!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 && !$scope.li5 && !$scope.li6 && !$scope.li7){
//全显示，格式全不正确，才能进来
//获得ID
var idMax = 0;
for(index in $scope.orders){
if($scope.orders[index].id>idMax){
idMax = $scope.orders[index].id;
}
}
//alert("添加");
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var myTime = month+"-"+day+" "+hours+":"+minute;
var order = {
id:idMax+1,
goodName:$scope.goodName,
userName:$scope.userName,
num:$scope.num,
price:2999.00,
city:$scope.city,
time:myTime,
state:"发货"
};
//将订单添加到数据源
$scope.orders.push(order);
}else{
//
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>订单页面</h3>
<input type="text" placeholder="用户名搜索" size="8" />
<input type="text" placeholder="手机号搜索" size="8" />
<select>
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<select>
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
<option>已收货</option>
</select>
<select ng-model="startTime">
<option>开始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>-
<select ng-model="endTime">
<option>结束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select><br /><br />
<button ng-click="goToPath()">新增订单</button>
<button>批量发货</button><br /><br />
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" /> </th>
<th>ID 排序</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格 排序</th>
<th>城市</th>
<th>下单时间 排序</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders" ng-if="filterTime($index)">
<td><input type="checkbox" /> </td>
<td>{{order.id}}</td>
<td>{{order.goodName}}</td>
<td>{{order.userName}}</td>
<td>{{order.num}}</td>
<td>{{order.price}}</td>
<td>{{order.city}}</td>
<td>{{order.time}}</td>
<td>
<span ng-if="order.state == '发货'"><a ng-click="changeState($index)" href="#">{{order.state}}</a></span>
<span ng-if="order.state == '已发货'">{{order.state}}</span>
<span ng-if="order.state == '已收货'">{{order.state}}</span>
</td>
</tr>
</tbody>
</table>
</center>
<!-- 添加定点页面 -->
<script type="text/ng-template" id="addOrder.html">
<center>
<h3>新增订单</h3>
商品名：<input type="text" ng-model="goodName" placeholder="6-20个字符"/><br /><br />
用户名：<input type="text" ng-model="userName" placeholder="4-16个字符"/><br /><br />
手机号：<input type="text" ng-model="num" placeholder="4-16个字符"/><br /><br />
城市：<select ng-model="city">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select><br />
<ul>
<li ng-show="li1">商品不能为空</li>
<li ng-show="li2">商品名必须是6-20个字符</li>
<li ng-show="li3">用户名不能为空</li>
<li ng-show="li4">用户名必须是4-16个字符</li>
<li ng-show="li5">手机号不能为空</li>
<li ng-show="li6">手机号格式不正确</li>
<li ng-show="li7">请选择城市</li>
</ul>
<input ng-click="sub()" type="button" value="提交"/><br />
</center>
</script>
<div ng-view>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../AngularJS/angular.js" ></script>
<script type="text/javascript" src="../AngularJS/angular-route.js" ></script>
<script>
var app = angular.module("myApp",['ngRoute']);
//配置路由
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/",{})
.when("/addOrder",{
controller:"addOrderCtrl",
templateUrl:"addOrder.html"
})
.otherwise({redirectTo:"/addOrder"});
}]);
app.controller("myCtrl",function($scope,$location){
//数据源
$scope.orders = [{
id:1,
goodName:"iPone4",
userName:"张三",
num:15555555555555,
price:4999.00,
city:"北京",
time:"08-01 10:00",
state:"发货"
},{
id:2,
goodName:"小米6",
userName:"李四",
num:155666666666666,
price:2999.00,
city:"上海",
time:"09-01 10:00",
state:"已发货"
},{
id:3,
goodName:"华为P9",
userName:"王五",
num:15577777777777,
price:3999.00,
city:"天津",
time:"10-01 10:00",
state:"已收货"
},{
id:4,
goodName:"OPPO R11",
userName:"赵六",
num:155888888888,
price:4999.00,
city:"重庆",
time:"11-11 10:00",
state:"发货"
}];
//定义跳转方法
$scope.goToPath = function(){
$location.path("/addOrder");
}
$scope.startTime = "开始月份";
$scope.endTime = "结束月份";
//过滤时间
$scope.filterTime = function(index){
//获得开始和结束月份
//获取当前订单的时间月份
var time = $scope.orders[index].time;
var month = parseInt(time.split("-")[0]);
if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
return true;
}else{
var start = parseInt($scope.startTime);
var end = parseInt($scope.endTime);
if(month >=start && month<=end ){
return true;
}else{
return false;
}
}
}
//更改状态
$scope.changeState = function(index){
$scope.orders[index].state = "已发货";
}
});
//添加订单控制器
app.controller("addOrderCtrl",function($scope){
$scope.goodName = "";
$scope.userName = "";
$scope.num = "";
$scope.city = "选择城市";
$scope.li1 = false;
$scope.li2 = false;
$scope.li3 = false;
$scope.li4 = false;
$scope.li5 = false;
$scope.li6 = false;
$scope.li7 = false;
$scope.sub = function(){
//判断商品名是否为空
if($scope.goodName == null || $scope.goodName == ""){
$scope.li1 = true;
}else{
$scope.li1 = false;
//判断商品名是否符合格式
if($scope.goodName.length <= 6 || $scope.goodName.length >= 20){
alert("asf")
$scope.li2 = true;
}else{
$scope.li2 = false;
}
}
//判断用户名是否为空
if($scope.userName == null || $scope.userName == ""){
$scope.li3 = true;
}else{
$scope.li3 = false;
//判断用户名是
4000
否符合格式
if($scope.userName.length <= 4 || $scope.userName.length >= 16){
$scope.li4 = true;
}else{
$scope.li4 = false;
}
}
//判断手机号是否为空
if($scope.num == null || $scope.num == ""){
$scope.li5 = true;
}else{
$scope.li5 = false;
//判断手机号是否符合格式
alert($scope.num.length);
if($scope.num.length == 11){
if(isNaN($scope.num)){
$scope.li6 = true;
}else{
$scope.li6 = false;
}
}else{
$scope.li6 = true;
}
}
//判断手机号是否符合格式
if($scope.city == "选择城市"){
$scope.li7 = true;
}else{
$scope.li7 = false;
}
if(!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 && !$scope.li5 && !$scope.li6 && !$scope.li7){
//全显示，格式全不正确，才能进来
//获得ID
var idMax = 0;
for(index in $scope.orders){
if($scope.orders[index].id>idMax){
idMax = $scope.orders[index].id;
}
}
//alert("添加");
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var myTime = month+"-"+day+" "+hours+":"+minute;
var order = {
id:idMax+1,
goodName:$scope.goodName,
userName:$scope.userName,
num:$scope.num,
price:2999.00,
city:$scope.city,
time:myTime,
state:"发货"
};
//将订单添加到数据源
$scope.orders.push(order);
}else{
//
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>订单页面</h3>
<input type="text" placeholder="用户名搜索" size="8" />
<input type="text" placeholder="手机号搜索" size="8" />
<select>
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<select>
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
<option>已收货</option>
</select>
<select ng-model="startTime">
<option>开始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>-
<select ng-model="endTime">
<option>结束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select><br /><br />
<button ng-click="goToPath()">新增订单</button>
<button>批量发货</button><br /><br />
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" /> </th>
<th>ID 排序</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格 排序</th>
<th>城市</th>
<th>下单时间 排序</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders" ng-if="filterTime($index)">
<td><input type="checkbox" /> </td>
<td>{{order.id}}</td>
<td>{{order.goodName}}</td>
<td>{{order.userName}}</td>
<td>{{order.num}}</td>
<td>{{order.price}}</td>
<td>{{order.city}}</td>
<td>{{order.time}}</td>
<td>
<span ng-if="order.state == '发货'"><a ng-click="changeState($index)" href="#">{{order.state}}</a></span>
<span ng-if="order.state == '已发货'">{{order.state}}</span>
<span ng-if="order.state == '已收货'">{{order.state}}</span>
</td>
</tr>
</tbody>
</table>
</center>
<!-- 添加定点页面 -->
<script type="text/ng-template" id="addOrder.html">
<center>
<h3>新增订单</h3>
商品名：<input type="text" ng-model="goodName" placeholder="6-20个字符"/><br /><br />
用户名：<input type="text" ng-model="userName" placeholder="4-16个字符"/><br /><br />
手机号：<input type="text" ng-model="num" placeholder="4-16个字符"/><br /><br />
城市：<select ng-model="city">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select><br />
<ul>
<li ng-show="li1">商品不能为空</li>
<li ng-show="li2">商品名必须是6-20个字符</li>
<li ng-show="li3">用户名不能为空</li>
<li ng-show="li4">用户名必须是4-16个字符</li>
<li ng-show="li5">手机号不能为空</li>
<li ng-show="li6">手机号格式不正确</li>
<li ng-show="li7">请选择城市</li>
</ul>
<input ng-click="sub()" type="button" value="提交"/><br />
</center>
</script>
<div ng-view>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS+bootstrap实现动态选择商品功能示例
- 分享一个本人开发的angularjs+bootstrap+Spring+mybatis实现的java web系统项目
- 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目
- 本文实例分析了js正则表达式中的单行模式与多行模式。分享给大家供大家参考
- PHP实现微信JS-SDK接口选择相册及拍照并上传的方法 lieren_chengshi 2016-12-05 8463 查看 0评论 公开 原文 举报 取精 添加收藏 本文实例讲述了
- 给大家分享一个省市区选择框_js实现
- js实现弹窗插件功能实例代码分享
- JS小功能(onmouseover实现选择月份)实例代码
- 根据公式计算y的值。其中∑表示求各项的和，∏表示求各项的积。定义一个类F，实现上述功能。具体要求如下：
- 总结了C#中string.format用法。分享给大家供大家参考。具体分析如下：
- AngularJS+RestfulAPI+BasicAuth+Python/PHP/Node.JS来实现一个最简单的新闻管理后台
- JS+CSS实现分类动态选择及移动功能效果代码
- 一次偶然机遇找到一个不错的关于Android实现加载gif动画的实例，写一下分享个大家。
- 简单工厂（Factory）-提供一个创建对象实例的功能，而无须关心其具体实现。被创建实例的类型可以是接口、抽象类，也可以是具体的类。
- 创建一个如下的窗体，并在窗体上放置colorDialog控件。实现功能：1）程序运行时，单击打开颜色对话框按钮，可选择颜色，并以所选颜色作为窗体背景色
- 微信JS-SDK实现自定义分享功能，分享给朋友，分享到朋友圈，后台实现
- 好久没更新博客了，今天给大家分享一下Android中的资源与国际化的问题,通常我们新建一个Android工程，目录结构如下图所示: 我们主要看一下layout与values目录,layou
- js实现弹窗插件功能实例代码分享
- 以前经常来这里,但是很少写博客.最近在做silverlight 项目.前几天被一个 类似.netmarquee的循环滚动的功能憋了很长时间,现在和大家分享下.
- JS小功能(onmouseover实现选择月份)实例代码