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 相关文章推荐
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
js时间查询插件使用详解
Apr 07 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
JS实现选项卡效果的代码实例
May 20 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
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
如何使用php输出时间格式
2013/08/31 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
vue 实现单选框设置默认选中值
2019/11/07 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python list格式数据excel导出方法
2018/10/31 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
联谊会主持词
2014/03/26 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
大学生实习推荐信
2015/03/27 职场文书
七年级思品教学反思
2016/02/20 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书