添加新的文本框上的角JS点击按钮 [英] Add new text box on click of a button in angular js
问题描述
如何当提交按钮被按下我添加新的文本框。这是我已经试过，我知道有一些东西是错误的。我还是新的角度JS。
例如：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题物实施例 - 例如，ngController生产＆LT; /标题＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js\"></script>
＆LT;脚本＆GT;
angular.module（'controllerAsExample'，[]）。控制器（'SettingsController1'，函数（$范围）{ $ scope.contacts = []
$ scope.addContact =功能（）
{
$ scope.contact.push（{$ scope.contact}）
}
}）;
};
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG-应用=controllerAsExample＆GT;
＆LT; DIV ID =CTRL-AS-exmplNG控制器=SettingsController1＆GT; ＆LT; UL＆GT;
＆LT;李NG重复=中的联系人联系＆GT;
＆LT;输入类型=文本NG模型=联系/＆GT;
＆LT; /李＆GT;
＆LT;立GT;＆LT;按钮NG提交=的addContact（）＆gt;添加＆LT; /按钮＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
在您code，你正在做的： -
$ scope.addContact =功能（）
{
$ scope.contact.push（{$ scope.contact}）
}
这是问题的所在。如果你只需要添加一个空的文本框，你只需要一个空的联系人添加到联系人，和NG重复将在列表中添加新的文本框的照顾。另一件事是，你推到接触，不接触。
此外，ngSubmit使用表单中，你没有。因此，改用NG点击。这里是一个 plunker 显示code工作。
$ scope.addContact =功能（）
{
$ scope.contacts.push（{名称：''}）;
}
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: '' });
}
这篇关于添加新的文本框上的角JS点击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
