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 如果改变span标签的是否隐藏属性
Oct 06 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
js面向对象编程总结
Feb 16 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
微信小程序开发之转发分享功能
Oct 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
一篇入门的php Class 文章
2007/04/04 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
深入php之规范编程命名小结
2013/05/15 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
matplotlib绘制动画代码示例
2018/01/02 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python3处理含有中文的url方法
2018/05/10 Python
python 字典中取值的两种方法小结
2018/08/02 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Java面试笔试题大全
2016/11/23 面试题
本科生详细的自我评价
2013/09/19 职场文书
控制工程专业个人求职信
2013/09/25 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
生活委员竞选稿
2015/11/21 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
如何用python清洗文件中的数据
2021/06/18 Python