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进阶教程(第四课第一部分)
Apr 05 Javascript
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
Javascript Math对象
Aug 13 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
老生常谈js中的MVC
Jul 25 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
node+vue实现文件上传功能
May 28 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
什么是SOLID
Mar 24 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
第八节--访问方式
2006/11/16 PHP
php 字符串函数收集
2010/03/29 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
简单实现python爬虫功能
2015/12/31 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python实现梯度下降算法
2020/03/24 Python
python实现词法分析器
2019/01/31 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
党组织公开承诺书
2014/03/29 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
党员读书活动心得体会
2016/01/14 职场文书