Question

我正在尝试使用angular创建简单的网页。我有2个文本框和2个按钮。 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

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

});

app.js alert（$ scope.textbox）中的

显示未定义的值。

Answer 1

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

＆＃13;

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

＆＃13;

<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></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>

＆＃13;

Answer 2

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

})();

如何在angularjs中获取文本框值？

2 个答案: