AngularJS实现动态添加[计]选项的方法

本文实例讲述了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.controller('DemoCtrl '，函数($ scope){ $ scope。选项容器=[]；var实物期权=[]；var randomCode=function(){ var chars=' abcdefghijkmnopsutvwxyzabbdefghjkmnopsutvwxyz 1234567890 '；var randomChars=for(var I=0；i 10I){ var index=math。地板(数学。random()*个字符。长度)；随机字符=随机字符。charat(一)；}返回randomChars } var getIndex=function(array，id){ var tmpItem={ }；angular.forEach(数组，函数（项){ if(item。id==id){ TMPitem=item；} });返回数组。indexof(TMPitem)；} $ scope。add=function(){ var option index=randomCode()；$ scope。选项容器。push({ id :选项索引，readOnly : false，内容： ' '，显示确认： true })控制台。日志($ scope)。选项容器)} $ scope。confirm=function(content，id){ if(content==' '){ return；} var标志=false angular . foreach(real options，function(item){ if(item==content){ flag=true；} });if (flag) { console.log('已经存在！);返回；} var tmpiddindex=GetIndex($ scope)。选项容器，id)；realOptions.push(内容);$ scope。选项容器[TMPiddindex].showConfirm=false$作用域。选项容器[TMPiddindex].readOnly=true} $作用域。delete func=function(id){ var tmpiddindex=GetIndex($ scope)。选项容器，id)；if($ scope。选项容器[tmpiddindex].show confirm==false){ tmpIndex=实物期权。indexof($ scope)。选项容器[tmpiddindex].内容);realOptions.splice(tmpIndex，1)；} $ scope。选项容器。拼接(TMPiD索引，1)；} });/script/head body ng-app=' myapp ' div ng-controller=' democratl ' div class=' Container ' h1创建选项/h1/div div table class=' table table-分条table-hover ' the and tr thooption/th/tr/ad t body tr ng-repeat=' option Container ' class=' row ' TD class=' col-MD-8 ' style=' width 3360100%；'输入类型=' text ' ng-model=' item。内容“ng-readonly=”项。只读'/TD类=' col-MD-2 '按钮类型=' button ' class=' BTN BTN-成功BTN-xs ' ng-click=' confirm(项。内容，项目。id)' ng-show='项。显示确认'确认/按钮/TD class=' col-MD-2 '按钮类型='按钮'=' BTN BTN-成功BTN-xs ' ng-click='删除'运行效果图如下：

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

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