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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
node 版本切换的实现
Feb 02 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
Less 安装及基本用法
2018/05/05 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
sqlalchemy对象转dict的示例
2014/04/22 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python url 参数修改方法
2018/12/26 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python中return不返回值的问题解析
2020/07/22 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
关于毕业的中学校园广播稿
2014/01/26 职场文书
科研课题实施方案
2014/03/18 职场文书
分居协议书范本
2014/11/03 职场文书
预备党员介绍人意见
2015/06/01 职场文书
英语教学课后反思
2016/02/15 职场文书
终止合同协议书范本
2016/03/22 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书