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去掉字符串里的所有空格
Feb 08 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 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
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
快速入门python学习笔记
2017/12/06 Python
用python实现的线程池实例代码
2018/01/06 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
施工班组长岗位职责
2014/01/05 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
亲情作文之母爱
2019/09/25 职场文书