单击 angular js 中的按钮添加新文本框 [英] Add new text box on click of a button in angular js

查看：22 发布时间：2021/11/9 21:58:36 angularjs angularjs-ng-repeat angularjs-controller

本文介绍了单击 angular js 中的按钮添加新文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在按下提交按钮时添加新的文本框.这是我尝试过的，我知道有些问题.我还是 angular js 的新手.

示例:

<html lang="zh-cn"><头><meta charset="UTF-8"><title>示例 - example-ngController-production</title><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script><脚本>angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope) {$scope.contacts=[]$scope.addContact = function(){$scope.contact.push({$scope.contact})}});};<body ng-app="controllerAsExample"><div id="ctrl-as-exmpl" ng-controller="SettingsController1"><ul><li ng-repeat="联系人中的联系人"><input type="text" ng-model="contact"/><li><button ng-submit="addContact()">add</button></li>

</html>

解决方案

在你的代码中，你正在做:-

 $scope.addContact = function(){$scope.contact.push({$scope.contact})}

这就是问题所在.如果你只需要添加一个空的文本框，你只需要在联系人中添加一个空的联系人，ng-repeat 会负责在列表中添加新的文本框.另一件事是你在推动接触，而不是接触.

此外，ngSubmit 用于表单中，而您没有表单.因此，请改用 ng-click.这是一个 plunker 显示代码工作.

 $scope.addContact = function(){$scope.contacts.push({ name: '' });}

How do I add new text box when submit button is pushed. This is what I have tried and I know there's some thing wrong. I am still new to angular js.

Example:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example - example-ngController-production</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script>
            angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope) {

                $scope.contacts=[]
                $scope.addContact = function()
                {
                  $scope.contact.push({$scope.contact})
                }
            });
            };
        </script>
    </head>
    <body ng-app="controllerAsExample">
        <div id="ctrl-as-exmpl" ng-controller="SettingsController1">

            <ul>
                <li ng-repeat="contact in contacts">
                    <input type="text" ng-model="contact" />
                </li>
                <li><button ng-submit="addContact()">add</button></li>
            </ul>
        </div>
    </body>
</html>

解决方案

In you code, you are doing:-

        $scope.addContact = function()
        {
          $scope.contact.push({$scope.contact})
        }

This is where the problem is. If you just need to add an empty textbox, you just need to add an empty contact to contacts, and ng-repeat will take care of adding the new textbox in the list. Another thing is that you were pushing into contact, and not contacts.

Also, ngSubmit is used inside a form, which you do not have. So, use ng-click instead. Here is a plunker showing the code working.

            $scope.addContact = function()
            {
              $scope.contacts.push({ name: '' });
            }

这篇关于单击 angular js 中的按钮添加新文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

单击 angular js 中的按钮添加新文本框 [英] Add new text box on click of a button in angular js

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

单击 angular js 中的按钮添加新文本框 [英] Add new text box on click of a button in angular js

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭