如何从输入框中获取angularJS中的值

How to get the value in angularJS from the input box

本文关键字：获取 angularJS 输入      更新时间：2023-09-26

如何获取name2的值？

function DemoController($scope) {
    $scope.name1 = 'LISA';
    //How can I get the value of name2?
    console.log($scope.name2) //this does not work
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
    {{ name1 }}
    <input type="text" placeholder="Lisa" ng-model="name2">
</div>

发生这种情况是因为您没有初始化控制器内的name2。因此在CCD_ 4时刻的范围中不存在称为CCD_。并且name2属性将在您对输入进行第一次更改后立即在作用域上创建。所以这就是为什么它得到undefined。

这是Demo Plunker，检查控制台。

$scope.$watch('name2', function(newVal, oldVal) {
    console.log("new value : " + newVal);
    console.log("old value : " + oldVal);
});

我在name2属性上添加了一个$watch（当更改name2的值时，这个$watch函数将执行），请注意，它首先是undefined，在文本框中键入内容后，它将立即获取input的值。

尝试这个

<div ng-app="" ng-controller="DemoController">
  {{ name2 }}
  <input type="text" placeholder="Lisa" ng-model="name2">
</div>

首先，您的控制器在$scope.name2存在之前就已经运行了。您应该让控制台在AFTER的某个时间点报告更改。从代码中删除该行。（console.log…）

每当名称2中的文本发生更改时，$scope.name2都将设置为该值。如果您在控制器上添加以下内容，您可以看到效果：

$scope.saveChanges = function () {
  alert($scope.name2);
}

和HTML：

<button ng-click="saveChanges()">See Value</button>

试着关注我。在第一次执行脚本时，不声明变量（或属性-对于本主题来说并不重要）。一旦解释器到达console.log函数，它就会尝试调用name2的值，但正如我们所说的，它没有定义。为了记录您绑定的数据，您应该实现一些逻辑，只在更改后执行console.log，甚至可能使用$scope.apply。（我认为$scope.apply现在对你来说太远了，你应该忽略它）。底线是-您的变量不是为第一次迭代定义的，因此您得到了这个结果。

您必须提交表单才能获得值，或者您使用监视函数

function DemoController($scope) {
  $scope.name1 = 'LISA';
 
   
$scope.submitName = function () {
 console.log($scope.name2)
}    
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
  {{ name1 }}
  <input type="text" placeholder="Lisa" ng-model="name2">
<button ng-click="submitName()">click </button>
</div>

name 2将随着您在输入框中的键入而更改。你可以通过添加来看到这一点

{{name2}}

到您的html

控制器不会看到名称2的更改，除非你注意它，你可以使用$watch来完成，将其添加到你的控制器中

   $scope.$watch('name2', function() {
    console.log($scope.name2);
    });

让您的ng模型处于监视状态，以获取更新

function DemoController($scope) {
  $scope.name1 = 'LISA';
 //this will work
 $scope.$watch(function(val){
  if(val){ 
 console.log($scope.name2);
 }
 });
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
  {{ name1 }}
  <input type="text" placeholder="Lisa" ng-model="name2">
</div>

相关文章：