AngularJS实现动态添加Option的方法
程序员文章站
2022-03-20 23:06:03
本文实例讲述了angularjs实现动态添加option的方法。分享给大家供大家参考,具体如下:
项目中后台管理设置,前台下拉动态添加option
本文实例讲述了angularjs实现动态添加option的方法。分享给大家供大家参考,具体如下:
项目中后台管理设置,前台下拉动态添加option
<!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.optioncontainer = []; var realoptions = []; var randomcode = function() { var chars = "abcdefghijkmnopqrstuvwxyzabcdefghjkmnopqrstuvwxyz1234567890"; var randomchars = ""; for (var i = 0; i < 10; i++) { var index = math.floor(math.random() * chars.length); randomchars = randomchars + chars.charat(i); } return randomchars; } var getindex = function(array, id) { var tmpitem = {}; angular.foreach(array, function(item) { if (item.id == id) { tmpitem = item; } }); return array.indexof(tmpitem); } $scope.add = function() { var optionindex = randomcode(); $scope.optioncontainer.push({ id : optionindex, readonly : false, content : '', showconfirm : true }) console.log($scope.optioncontainer) } $scope.confirm = function(content, id) { if (content == '') { return; } var flag = false; angular.foreach(realoptions, function(item) { if (item == content) { flag = true; } }); if (flag) { console.log('already exist!'); return; } var tmpidindex = getindex($scope.optioncontainer, id); realoptions.push(content); $scope.optioncontainer[tmpidindex].showconfirm = false; $scope.optioncontainer[tmpidindex].readonly = true; } $scope.deletefunc = function(id) { var tmpidindex = getindex($scope.optioncontainer, id); if ($scope.optioncontainer[tmpidindex].showconfirm == false) { tmpindex = realoptions.indexof($scope.optioncontainer[tmpidindex].content); realoptions.splice(tmpindex, 1); } $scope.optioncontainer.splice(tmpidindex, 1); } }); </script> </head> <body ng-app="myapp"> <div ng-controller="democtrl"> <div> <div class="container"> <h1>create options</h1> </div> <div> <div> <table class="table table-striped table-hover"> <thead> <tr> <th>option</th> </tr> </thead> <tbody> <tr ng-repeat="item in optioncontainer" class="row"> <td class="col-md-8" style="width:100%;"> <input type="text" ng-model="item.content" ng-readonly="item.readonly"/></td> <td class="col-md-2"> <button type="button" class="btn btn-success btn-xs" ng-click="confirm(item.content, item.id)" ng-show="item.showconfirm">confirm </button> </td> <td class="col-md-2"> <button type="button" class="btn btn-success btn-xs" ng-click="deletefunc(item.id)">delete </button> </td> </tr> </tbody> </table> </div> <a class="btn btn-success btn-xs" ng-click="add()">add</a> </div> </div> </div> </body> </html>
运行效果图如下:
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
上一篇: 王者荣耀是用什么代码变成MOBA游戏的,该怎么学?有前途吗?
下一篇: 卡牌游戏 IV