Fatal编程技术网
  • javascript/
  • Javascript 如何获取angularjs中的文本框值？

Javascript 如何获取angularjs中的文本框值？

javascript jquery html angularjs

Javascript 如何获取angularjs中的文本框值？,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我正在尝试使用angular创建简单的网页。 我有两个文本框和两个按钮。 1个按钮，用于在文本框中设置值prdefine 2写一些文字并添加。 当我点击“添加”按钮时，文本框1和2应该在屏幕的另一个地方打印出来 这是代码。 index.html <!DOCTYPE html> <html lang="en" ng-app="chatApp"> <head> <meta charset="UTF-8"> <title>Chat Appli

我正在尝试使用angular创建简单的网页。 我有两个文本框和两个按钮。 1个按钮，用于在文本框中设置值prdefine 2写一些文字并添加。 当我点击“添加”按钮时，文本框1和2应该在屏幕的另一个地方打印出来

这是代码。 index.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警报（$scope.textbox）中显示未定义的值。

试试这个，它可以工作 您可以使用
angular.element（document.getElementById（“Text1”））
从javascript获取值。并将该值设置为范围变量

无需向函数发送任何值，因为
textbox
是
scope
值

  $scope.pset = function(){
    var   x=angular.element(document.getElementById("Text1"));      
    $scope.textbox = x.val();
    alert($scope.textbox);
  }

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.pset=函数（）{
var x=angular.element（document.getElementById（“Text1”）；
$scope.textbox=x.val（）；
警报（$scope.textbox）；
}
});


window.onload=function（）{
//document.getElementById（“Text1”）.value=“Johnny Bravo”；
}
函数myFunction（）{
document.getElementById（“Text1”）.value=“Johnny Bravo”；
}
设定值

查看页面：
登录
用户名
用户名是必需的
密码
密码是必需的
登录
在控制器中：
（功能（）{
"严格使用",；
有棱角的
.module（'应用程序'）
.控制器（“登录控制器”，登录控制器）；
LoginController.$inject=['$location'，'AuthenticationService'，'FlashService']；
函数LoginController（$location、AuthenticationService、FlashService）{
var vm=这个；
vm.login=登录；
函数登录（）{
vm.dataload=true；
AuthenticationService.Login（vm.username、vm.password、函数（响应）{
if（response.success）{
AuthenticationService.SetCredentials（vm.username、vm.password）；
$location.path（'/'）；
}否则{
FlashService.Error（response.message）；
vm.dataload=false；
}
});
};
}
})();

仅使用
ngClick
。另外，您不需要将其作为参数传递。嗨@tom我可以更改架构，我需要通过java脚本设置值并在AngularJS中获取值为什么要通过javascript更改文本值？因为我在做javascript转换语言的项目，我必须在angular@MehandiHassan，请参阅更新的答案，其工作原理请添加一些解释，说明此代码块如何解决当前问题。

  $scope.pset = function(){
    var   x=angular.element(document.getElementById("Text1"));      
    $scope.textbox = x.val();
    alert($scope.textbox);
  }



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

})();