AngularJS实现动态添加Option的方法


Posted in Javascript onMay 17, 2017

本文实例讲述了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实现动态添加Option的方法

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

Javascript 相关文章推荐
JavaScript自定义事件介绍
Aug 29 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 #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
You might like
JS 网站性能优化笔记
2011/05/24 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
基于jquery的多功能软键盘插件
2012/07/25 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python入门之井字棋小游戏
2020/03/05 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
城市规划应届毕业生自荐信
2014/07/04 职场文书
机电系毕业生求职信
2014/07/11 职场文书
小学四年级学生评语
2014/12/26 职场文书
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python