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 相关文章推荐
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 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
PHP5 安装方法
2007/01/15 PHP
PHP注释实例技巧
2008/10/03 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
React Native 环境搭建的教程
2017/08/19 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
快速了解Python中的装饰器
2018/01/11 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
销售人员自我评价
2014/02/01 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
整改报告格式
2014/11/06 职场文书
股权转让协议范本
2014/12/07 职场文书
Python访问Redis的详细操作
2021/06/26 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL