本文实例讲述了AngularJS自举实现动态选择商品功能。分享给大家供大家参考，具体如下：

项目中后台一个商品库，新建活动时动态选择所需商品

！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='样式表href=' bootstrap。量滴CSS ' rel='外部无跟随'脚本src=' http 3360 jquery。量滴js /脚本src='http:angular.js .app。控制器('民主'，函数($ scope){ $ scope。promotion products=[]；$ scope . pic=$ scope . all pictures=[{ name : '濃縮蕃茄，图像文森州： ' http://。qiniudn。com/aa0f 41e 7 aa 0b 24 DBE 6e 20 b3f。' png '，描述： '2kg x2罐每組建議售價： 420 '，href : 'www.baidu.com' }，{ name : '龍蝦汁粉，图片： ' http://vincenthou。qiniudn。com/51c 37 a 943 a 161 b2d 0b 510 a 48。png '，描述： '500g x1盒每組建議售價： 400 '，href : 'www.baidu.com' }，{ name : '美玉白汁，图片文森州： ' http://。qiniudn。com/EAF 6459357 ce 21 a 87 e 586312。' png '，描述： '3.5kg x1盒每組建議售價： 396 '，href : ' www。百度。com ' }]；$ scope。add option=function(content){ if(content==' '){ return；} $ scope。促销产品。推送(内容)；$ scope。所有图片。拼接($ scope)。所有图片。indexof(content)，1)；$ scope.pic=} $ scope。delete option=函数(项){ $ scope。所有图片。推送(项目)；$ scope。促销产品。拼接($ scope)。促销产品。indexof(项)，1)；} });/script/head body ng-app=' myapp ' div ng-controller=' DeMoctrl ' div h1选项/h1/div div table class=' table-table-分条表-边框表-悬停表-压缩'和tr th商品名称/th商品描述/th商品链接/th商品图片/th操作/th/tr/ad t主体tr ng-repeat=' promotion products '中的项目TD class=' col-MD-3 '标签{ { item。名称} }/标签/TD TD class=' col-MD-3 '标签{ { item。描述} }/标签/TD TD class=' col-MD-3 '标签{ { item。href } }/label/TD class=' col-MD-2 ' img ng-src=' http 3360 { { item }。图像} } '//TD选择商品/option/选择一个类=' BTN BTN-成功BTN-xs ' ng-click='附加选项(pic)' Add/a/div/div/div/body/html运行效果图如下：

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。