Question

在执行某些操作时，我有一个问题是显示 INPUT 字段。
- 我有BUTTON（点击此处）用户在按钮上发出点击事件我想显示输入字段
- 我是通过使用jQuery完成的。
任何人都可以帮我Angular.js

Answer 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/

Answer 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>

脚本：

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

请不要将范围变量和函数名称相同这里的例子

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

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

请参阅此小提琴网址：https://jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/

Answer 3

＆＃13;

<!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>

＆＃13;

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

3 个答案: