AngularJS+bootstrap实现动态选择商品功能示例


Posted in Javascript onMay 17, 2017

本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考,具体如下:

项目中后台一个商品库,新建活动时动态选择所需商品

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
  <script src="jQuery.min.js"></script>
  <script src="angular.js"></script>
  <script src="angular-animate.js"></script>
  <script src="bootstrap.min.js"></script>
  <script type="text/JavaScript">
    var app = angular.module('myapp', []);
    app.controller('DemoCtrl', function ($scope) {
      $scope.promotionProducts = [];
      $scope.pic = '';
      $scope.allPictures = [
        {
          name : '?饪s蕃茄',
          image : 'http://vincenthou.qiniudn.com/aa0f41e7aa0b24dbe6e20b3f.png',
          description : '2kg x2罐 每?建?售?r: 420',
          href : 'www.baidu.com'
        },
        {
          name : '??汁粉',
          image : 'http://vincenthou.qiniudn.com/51c37a943a161b2d0b510a48.png',
          description : '500g x1盒 每?建?售?r: 400',
          href : 'www.baidu.com'
        },
        {
          name : '美玉白汁',
          image : 'http://vincenthou.qiniudn.com/eaf6459357ce21a87e586312.png',
          description : '3.5kg x1盒 每?建?售?r: 396',
          href : 'www.baidu.com'
        }
      ];
      $scope.addOption = function(content) {
        if (content == '') {
          return;
        }
        $scope.promotionProducts.push(content);
        $scope.allPictures.splice($scope.allPictures.indexOf(content), 1);
        $scope.pic = '';
      }
      $scope.deleteOption = function(item) {
        $scope.allPictures.push(item);
        $scope.promotionProducts.splice($scope.promotionProducts.indexOf(item), 1);
      }
    });
  </script>
 </head>
 <body ng-app="myapp">
  <div ng-controller="DemoCtrl">
    <div>
      <div>
       <h1>option</h1>
      </div>
      <div>
        <div>
         <table class="table table-striped table-bordered table-hover table-condensed">
           <thead>
             <tr>
               <th>商品名称</th>
               <th>商品描述</th>
               <th>商品链接</th>
               <th>商品图片</th>
               <th>操作</th>
             </tr>
           </thead>
           <tbody>
            <tr ng-repeat="item in promotionProducts">
              <td class="col-md-3"><label>{{item.name}}</label></td>
              <td class="col-md-3"><label>{{item.description}}</label></td>
              <td class="col-md-3"><label>{{item.href}}</label></td>
              <td class="col-md-2"><img ng-src="{{item.image}}" /></td>
              <td class="col-md-1">
               <button type="button" class="btn btn-success btn-sm" ng-click="deleteOption(item)">Delete
               </button>
              </td>
            </tr>
           </tbody>
         </table>
        </div>
        <select ng-options="item.name for item in allPictures" ng-model="pic">
         <option value="">选择商品</option>
        </select>  
        <a class="btn btn-success btn-xs" ng-click="addOption(pic)">Add</a>
      </div>
    </div>
  </div>
 </body>
</html>

运行效果图如下:

AngularJS+bootstrap实现动态选择商品功能示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
JS二维数组的定义说明
Mar 03 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
Vue声明式渲染详解
May 17 #Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 #Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 #Javascript
AngularJS实现的回到顶部指令功能实例
May 17 #Javascript
bootstrap模态框示例代码分享
May 17 #Javascript
ES6入门教程之let和const命令详解
May 17 #Javascript
详解如何在Angular中快速定位DOM元素
May 17 #Javascript
You might like
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php创建多级目录的方法
2015/03/24 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
js微信分享实现代码
2020/10/11 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python pymongo模块用法示例
2018/03/31 Python
Django接收自定义http header过程详解
2019/08/23 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python中二分查找法的实现方法
2020/12/06 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
写给保洁员表扬信
2014/01/08 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
自我鉴定总结
2014/03/24 职场文书
离婚协议书标准格式
2014/10/04 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Golang获取List列表元素的四种方式
2022/04/20 Golang