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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
Node.js事件驱动
Jun 18 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
js实现点赞按钮功能的实例代码
Mar 06 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
PHP下载远程图片的几种方法总结
2017/04/07 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
JsDom 编程小结
2011/08/09 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
react基本安装与测试示例
2020/04/27 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
Python中防止sql注入的方法详解
2017/02/25 Python
python基础教程项目二之画幅好画
2018/04/02 Python
3分钟学会一个Python小技巧
2018/11/23 Python
python3 线性回归验证方法
2019/07/09 Python
python中dict使用方法详解
2019/07/17 Python
Django之路由层的实现
2019/09/09 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
迟到检讨书500字
2014/02/05 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
酒会开场白大全
2015/06/01 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android