当我们使用angularjs单击链接时如何动态创建文本框

I have a problem to show INPUT field when do some action.

我有一个问题，当做一些动作时显示INPUT字段。
- I have BUTTON (Click here) as soon as user made a click event on button i wanted to show input field
- 我有BUTTON（点击这里），一旦用户在按钮上发出点击事件，我想显示输入字段
- I have done this by using jQuery.
- 我通过使用jQuery完成了这个。
Can any one help me in Angular.js

任何人都可以帮助我Angular.js

3 个解决方案

#1

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.boxShow = false;
});
</script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <a href="#" ng-click="boxShow=!boxShow">show box</a>

        <div ng-show="boxShow">
            <textarea rows="4" cols="50">text</textarea>
        </div>
    </div>
</div>

https://jsfiddle.net/bxwjpmaa/1/

#2

HTML

 <div class="btn btn-primary" ng-click="openTextBox();">Click Me To open text box</div>
 <div ng-show="openTextBox == true">
   <input type="text"/>
 </div>

SCRIPT :

脚本：

 $scope.openTextBox = function () {
     $scope.openTextBox = true;
 }

please don't take scope variables and function names same example here

请不要在此处使用范围变量和函数名称相同的示例

 $scope.openTextBox = function () {
   $scope.openTextBox = true;
   }

//this is not correct as per angular documentation because scope.openTextBox name already assigned to scope function,again its assigning scope variable "$scope.openTextBox = true" here u will get errors when ever u clicked div second time" TypeError: boolean is not a function" it will throw this error.so please dont use which is already assigned scope function dont assign scope variable

//这是不正确的角度文档，因为scope.openTextBox名称已经分配给范围函数，再次分配范围变量“$ scope.openTextBox = true”这里你将在第二次点击div时得到错误“TypeError：boolean不是一个函数“它会抛出这个错误。所以请不要使用已经分配的范围函数不要分配范围变量

see this fiddle url : https://jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/

看到这个小提琴网址：https：//jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/

#3

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="element in elements">
    <input type="text" ng-model="element.value"/>
    </li>
</ol>
<br/>
<b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
<br/>
<br/>

<b>Click here to see ng-model value:</b><br/>
<input type="button" value="submit" ng-click="show(elements)">

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 var counter=0;
    $scope.elements = [ {id:counter, value : ''} ];

    $scope.newItem = function(){
        counter++;
        $scope.elements.push(  { id:counter,value:''} );
        
    }
    
    $scope.show=function(elements)
    {
        alert(JSON.stringify(elements));
        
    }
  
});
</script>
</body>
</html>

#1

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.boxShow = false;
});
</script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <a href="#" ng-click="boxShow=!boxShow">show box</a>

        <div ng-show="boxShow">
            <textarea rows="4" cols="50">text</textarea>
        </div>
    </div>
</div>