Question

如图所示，如何通过该键盘输入我的电话号码。我正在尝试，但我的方法是重载以前的按钮值。那么请一个人帮我怎么做...... 我认为我们需要连接按钮值。如果按下“1”按钮，则textfield中的值应为“1”，如果我按“2”，则textfield中的值应为“12”。一切都正常，除了这些。清除按钮它清除文本字段

angular.module('myApp', [])
.controller('MyCtrl', function($scope) 
{
	$scope.chandru = false;
	$scope.noinput = "";
	$scope.newNumber = true;
	$scope.cleartext = function()
		{
			$scope.noinput = "";
		};
	$scope.hideshow = function(id) 
		{
			$scope.chandru = true;
		};
	$scope.updateOutput = function(btn)
		 {
		    if($scope.noinput == "" || $scope.newNumber) {
		      $scope.noinput = btn;
		      $scope.newNumber = false;
		    } else {
		        $scope.noinput += String(btn);
		    }
		    
		 };

       
});

.mainform {
	background-color: #c0c0c0;
	
	
	margin-right: 300px;
	margin-bottom: 100px;
	margin-top: 100px;
	margin-left: 300px;
	border-radius: 10px;
	padding-left: 30px;
	padding-bottom: 30px;
	padding-top: 30px;
	padding-right: 30px;
}
.Head {
	color: #4169E1;
	border-bottom: 2px solid #DC143C;	
	font-family: Righteous;
}

.inputprop {
	border-radius: 5px;
	border: 1px solid black;
	height: 30px;
}
.classnumber {
	border: 2px solid black;
	border-radius: 5px;
	padding-left: 10px;
	margin-right: 5px;
	width: 35px;
	height: 30px;
	font-size: 20px;
}
.classClear {
	border: 2px solid black;
	border-radius: 5px;
	padding-left: 10px;
	margin-right: 5px;
	width: 70px;
	height: 30px;
	font-size: 20px;
}
.classOk {
	border: 2px solid black;
	border-radius: 5px;
	padding-left: 10px;
	margin-right: 5px;
	width: 50px;
	height: 30px;
	font-size: 20px;
}


#buttondesign {
	display: inline;
	border: 2px solid black;
	width: 40px;
	height: 40px;
	border-radius: 5px;
}

.clearbutton {
	border: 2px solid black;
	width: 60px;
	height: 40px;
	border-radius: 5px;
}
.okbutton {
	border: 2px solid black;
	width: 50px;
	height: 40px;
	border-radius: 5px;

}

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<title>My Task</title>
<link rel="stylesheet" type="text/css" href="styele.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="MyCtrl">
 <div class="mainform">   
 	<h1 class="Head"> SignUp</h1>
 	<div style="color: #4682b4; font-size: 20px;">
 	<center>
 		Enter mobile number:
         <select class="inputprop">
			  <option value="IND(91)">IND(91)</option>
			  <option value="PAK(92)">PAK(92)</option>
			  <option value="SRL(93)">SRL(93)</option>
			  <option value="NUL(92)">NUL(92)</option>
		</select> 
 		<input class="inputprop"type="text" name="mobileno" value="{{noinput}}" 
 		ng-model="noinput" placeholder="enter mobile number"/><br><br>
 		Press OK to send OTP

 	</center><br><br>
 		<center><div ng-init="num=['1','2', '3', '4', '5', '6', '7', '8', '9', '0']">
            <div style="display: inline;"ng-repeat="item in num">            
	 			<button id="buttondesign"  type="button"  name="namebutton"
	 			 ng-click="updateOutput({{item}})">{{item}}</button>			
	 			</div> 		
	 			<input class="clearbutton" type="button" value="Clear" ng-click="cleartext()"/>
	 			<input class="okbutton"type="button" value="OK" ng-click="hideshow('second')"/>	
 			</div>
 		</center>
 		
 	</div>
 	</div>
  </body>
  </html>

Answer 1

你可以在每个按钮上加ng-click="buttonPressed(number)"。

 <button ng-click="buttonPressed(1)>1</button>
 <button ng-click="buttonPressed(2)>2</button>
 <button ng-click="buttonPressed(3)>3</button>
    ...

因此，当您按下按钮时，它会调用此功能。

然后在您的控制器中声明此功能

var pressed = [];
$scope.buttonPressed = function(number){
    pressed.push( number ) ;
    console.log(pressed);
    // to other stuff   
}

如何在angularjs

1 个答案: