AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能示例

更新時間：2017年05月17日 10:47:40 作者：timelessmemoryli

這篇文章主要介紹了AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能,涉及AngularJS指令、事件響應及頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下

本文實例講述了AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能。分享給大家供大家參考，具體如下：

項目中后臺一個商品庫，新建活動時動態(tài)選擇所需商品

<!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 : '濃縮蕃茄',
          image : 'http://vincenthou.qiniudn.com/aa0f41e7aa0b24dbe6e20b3f.png',
          description : '2kg x2罐 每組建議售價: 420',
          href : 'www.baidu.com'
        },
        {
          name : '龍蝦汁粉',
          image : 'http://vincenthou.qiniudn.com/51c37a943a161b2d0b510a48.png',
          description : '500g x1盒 每組建議售價: 400',
          href : 'www.baidu.com'
        },
        {
          name : '美玉白汁',
          image : 'http://vincenthou.qiniudn.com/eaf6459357ce21a87e586312.png',
          description : '3.5kg x1盒 每組建議售價: 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>&nbsp;&nbsp;
        <a class="btn btn-success btn-xs" ng-click="addOption(pic)">Add</a>
      </div>
    </div>
  </div>
 </body>
</html>

運行效果圖如下：

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章:

Angular模版驅動表單的使用總結
這篇文章主要介紹了Angular模版驅動表單的使用總結，本文實現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗，狀態(tài)管理，非常具有實用價值，需要的朋友可以參考下
2018-05-05
解決Angular.Js與Django標簽沖突的方案
AngularJS和django的模板都是用{{}}來引用變量的，這就導致了沖突，所以這篇文章主要就給大家介紹了如何解決Angular.Js與Django標簽沖突的方案，有需要的朋友們可以參考借鑒，下面來一起學習學習吧。
2016-12-12
Angularjs 手寫日歷的實現(xiàn)代碼（不用插件）
本篇文章介紹了Angularjs 手寫日歷的實現(xiàn)代碼（不用插件），整理了詳細的代碼，非常具有實用價值，需要的朋友可以參考下
2017-10-10
angular多選表單數(shù)據(jù)綁定的簡單嘗試
AngularJS中數(shù)據(jù)綁定相信大家應該都不陌生了,這篇文章主要給大家介紹了關于angular多選表單數(shù)據(jù)綁定的簡單嘗試,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
AngularJS基礎 ng-if 指令用法
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎資料,并有實例代碼,有需要的同學可以參考下
2016-08-08
AngularJS安裝版本問題解析
這篇文章主要介紹了AngularJS安裝版本問題解析,在這需要注意在安裝前請確保自己安裝NodeJS環(huán)境版本為V18及以上，否則會因node版本問題導致項目無法正常運行，需要的朋友可以參考下
2024-02-02
基于Angular 8和Bootstrap 4實現(xiàn)動態(tài)主題切換的示例代碼
這篇文章主要介紹了基于Angular 8和Bootstrap 4實現(xiàn)動態(tài)主題切換的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
Angular-Touch庫用法示例
這篇文章主要介紹了Angular-Touch庫用法,結合觸屏滑動事件的實現(xiàn)為例分析了Angular-Touch庫的相關使用技巧,需要的朋友可以參考下
2016-12-12
利用angularjs1.4制作的簡易滑動門效果
本文主要介紹了利用angularjs1.4制作的簡易滑動門效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
AngularJS 購物車全選/取消全選功能的實現(xiàn)方法
下面小編就為大家?guī)硪黄狝ngularJS 購物車全選/取消全選功能的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08