Javascript 我如何在 angularjs 中获取文本框值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38735942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i get textbox value in angularjs?
提问by Mehandi Hassan
I am trying to create simple web page using angular. I have 2 textbox and also 2 buttons. 1 button to set value prdefine in textbox 2 write some text and add. When i will click on add button then textbox 1and 2 should printon screen another place.
我正在尝试使用 angular 创建简单的网页。我有 2 个文本框和 2 个按钮。1 按钮在文本框中设置值 prdefine 2 写一些文本并添加。当我点击添加按钮时，文本框 1 和 2 应该在屏幕上的另一个地方打印。
Here the code. index.html
这里是代码。索引.html
<!DOCTYPE html>
<html lang="en" ng-app="chatApp">
<head>
<meta charset="UTF-8">
<title>Chat Application</title>
<script src="scripts/angular.min.js"></script>
<script src="scripts/app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<script>
function myFunction() {
document.getElementById("Text1").value = "Johnny Bravo";
}
</script>
<body ng-controller="chatController">
<div class="container">
<div class="chatArena">
<div class="userList">
<ul>
<li ng-repeat="person in listPeopleAdded" >{{person.name}}</li>
<li ng-repeat="person in pretext" >{{person.name}}</li>
</ul>
</div>
</div>
<div class="chatAdder">
<input type='text' ng-model='textbox' name='textbox1' id='Text1'>
<button onclick="myFunction()" ng-click="pset(textbox)">set value</button>
<br>
<br>
<input type="text" name="personName" class="chatInputPersonName" ng-model="personName">
<button ng-click="addPerson()">Add Value</button>
</div>
</div>
</body>
</html>
app.js
应用程序.js
var app = angular.module('chatApp',[]);
app.controller('chatController',function($scope){
$scope.pretext=[];
$scope.listPeopleAdded = [];
$scope.addPerson = function(){
$scope.listPeopleAdded.push({name:$scope.personName})
}
$scope.pset = function(textbox){
alert($scope.textbox)
$scope.pretext.push({name:$scope.textbox})
}
});
in app.js alert($scope.textbox) show undefined value.
在 app.js alert($scope.textbox) 中显示未定义的值。
回答by rejo
Try this , its working
You can use angular.element(document.getElementById("Text1"))to get value from javascript. And this value set to scope variable.
试试这个，它的工作原理你可以用来angular.element(document.getElementById("Text1"))从 javascript 中获取价值。并将此值设置为范围变量。
No need to send any value to function since textboxis scopevalue.
无需向函数发送任何值，因为它textbox是scope值。
$scope.pset = function(){
var x=angular.element(document.getElementById("Text1"));
$scope.textbox = x.val();
alert($scope.textbox);
}
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.pset = function(){
var x=angular.element(document.getElementById("Text1"));
$scope.textbox = x.val();
alert($scope.textbox);
}
});<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="[email protected]"></script>
<script>
window.onload=function(){
// document.getElementById("Text1").value = "Johnny Bravo";
}
function myFunction() {
document.getElementById("Text1").value = "Johnny Bravo";
}
</script>
<body ng-app="plunker" ng-controller="MainCtrl">
<input type='text' ng-model='textbox' name='textbox1' id='Text1'>
<button onclick="myFunction()" ng-click="pset()">set value</button>
</body>回答by Mani
View page:
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>
<a href="#!/register" class="btn btn-link">Register</a>
</div>
</form>
</div>
In controller :
(function () {
'use strict';
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService'];
function LoginController($location, AuthenticationService, FlashService) {
var vm = this;
vm.login = login;
function login() {
vm.dataLoading = true;
AuthenticationService.Login(vm.username, vm.password, function (response) {
if (response.success) {
AuthenticationService.SetCredentials(vm.username, vm.password);
$location.path('/');
} else {
FlashService.Error(response.message);
vm.dataLoading = false;
}
});
};
}
})();
