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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
JS中Array数组学习总结
Jan 18 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
微信小程序自定义组件
Aug 16 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
javascript canvas实现雨滴效果
Jun 09 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php文件管理基本功能简单操作
2017/01/16 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
非常详细的C#面试题集
2016/07/13 面试题
精彩自我鉴定
2014/01/16 职场文书
自荐信的基本格式
2014/02/22 职场文书
财务管理专业求职信
2014/06/11 职场文书
工作收入住址证明
2014/10/28 职场文书
优秀高中学生评语
2014/12/30 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
酒店温馨提示语
2015/07/14 职场文书
初二物理教学反思
2016/02/19 职场文书
2019年工作总结范文
2019/05/21 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS