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 函数参数限制说明
Nov 19 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
一个可复用的vue分页组件
May 15 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 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生成短网址的3种方法代码实例
2014/07/08 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python 输出所有大小写字母的方法
2019/01/02 Python
详解python读取和输出到txt
2019/03/29 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python分布式计算dispy的使用详解
2019/12/22 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
Django如何重置migration的几种情景
2021/02/24 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
实习评语
2013/12/16 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
岗位职责怎么写
2014/03/14 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript