动态添加Option

最新推荐文章于 2022-09-19 15:26:26 发布

原创最新推荐文章于 2022-09-19 15:26:26 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

这篇博客展示了如何在AngularJS应用中实现动态添加下拉框（select）的选项。通过控制器`DemoCtrl`，文章详细介绍了添加、确认和删除选项的方法，包括生成唯一ID、检查选项是否存在以及更新选项列表的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中后台管理设置，前台下拉动态添加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">
    <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>