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的Pager分页器实现代码
Jul 17 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
关于vue-router的那些事儿
May 23 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Element实现动态表格的示例代码
Aug 02 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设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
django创建简单的页面响应实例教程
2019/09/06 Python
python学生信息管理系统实现代码
2019/12/17 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
网络安全类面试题
2015/08/01 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2015年班组长工作总结
2015/04/10 职场文书
法制工作总结2015
2015/07/23 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
OpenCV全景图像拼接的实现示例
2021/06/05 Python
golang的文件创建及读写操作
2022/04/14 Golang