我如何获得angularjs中的文本框值？

我正在尝试使用角度创建简单的网页。我有2个文本框和2个按钮。 1按钮设置文本框中的prdefine值 2编写一些文本并添加。当我点击添加按钮时，文本框1和2应该在另一个地方打印屏幕。我如何获得angularjs中的文本框值？

这里的代码。的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）app.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}) 
} 

});

显示未定义的值。

来源

2016-08-03 Mehandi Hassan

只使用'ngClick'。你也不需要把它作为参数传递。 – developer033

试试这个，它的工作原理您可以使用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', []); 
 

 
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="angular[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>

来源

2016-08-03 06:30:30

嗨@tom我可以更改体系结构，我需要通过java脚本设置值并在angularjs中获取值 –

为什么通过javascript更改文本值？ –

，因为我在做项目中的JavaScript转换语言，我必须得到角度更改语言值 –

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

})();

来源

2017-12-03 11:49:46

请添加一些解释，以了解此代码块如何解决手头的问题。 –

我如何获得angularjs中的文本框值？

回答

相关问题