如何動態創建文本框，當我們點擊使用angularjs

我有一個問題，以顯示INPUT領域做一些動作時，一個鏈接。如何動態創建文本框，當我們點擊使用angularjs
- 我有按鈕，只要用戶提出的按鈕我想表明輸入字段
- 我已經使用jQuery做這個click事件（點擊此處）。
任何一個可以幫助我在Angular.js

2015-04-17 MandaliVenkat

你可以試試角指令，因爲在這個崗位http://stackoverflow.com/questions/24423152/create-dynamic-textbox-using-angular-directive – Ravi

嘗試過廣告中提及'ng-show =「someVariable」'到你的文本框，並在你的鏈接上設置一個'ng-click =「OnLinkClicked（）」'並在你的'OnLinkClicked'設置'someVariable = true' – Altoyyr

請反饋bu選擇正確答案 – Sarkhan

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

來源

2015-04-17 07:15:04 Sarkhan

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; 
}

請不要拿範圍變量和函數名稱相同這裏例如

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

//這是不是每角文檔正確的，因爲scope.openTextBox名稱已經分配給範圍的功能，其再次分配範圍變量「$ scope.openTextBox = true」這裏你會得到錯誤，當你點擊div第二次「TypeError：布爾不是一個函數」它會拋出這個錯誤。所以請不要使用已經分配的範圍函數不要指定範圍變量

看到這個小提琴的網址：https://jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/

來源

2015-04-17 07:18:16

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

來源

2017-06-28 17:18:22

如何動態創建文本框，當我們點擊使用angularjs

回答

相關問題