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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
javascript白色简洁计算器
May 04 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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制作静态网站的模板框架
2006/10/09 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
Vue渲染函数详解
2017/09/15 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python assert语句的简单使用示例
2019/07/28 Python
Django 反向生成url实例详解
2019/07/30 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
工程师岗位职责规定
2014/02/26 职场文书
房地产活动策划方案
2014/05/14 职场文书
帝企鹅日记观后感
2015/06/10 职场文书