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

Question

如何获取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>

Answer 1

试试这个

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

Answer 2

这是因为你没有初始化控制器内部的name2。因此在console.log时间范围内没有name2的房产。和name2属性将在您对输入进行第一次更改后立即创建。所以这就是为什么它得到undefined。

这里是Demo Plunker，检查控制台。

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

我添加了一个$watch上name2财产（这$watch函数变化的name2值时，将执行），注意其undefined第一，它会接受输入的值之后，你在输入的东西文本框。

Answer 3

首先，您的控制器在$ scope.name2之前运行，甚至还存在。您应该让控制台在AFTER后的某个时刻报告更改。从代码中删除该行。 （console.log ...）

每当name2中的文本发生更改时，$ scope.name2将被设置为该值。你可以看到效果，如果你添加下面的控制器：

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

而到了HTML：

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

Answer 4

尽量按照我在这一个。 在脚本的第一次执行中，变量（或属性 - 对于此主题无关​​紧要）未被声明。 一旦解释器达到console.log函数，它会尝试调用name2的值，但正如我们所说 - 它没有被定义。 为了记录您要绑定的数据，您应该实现一些逻辑，仅在更改或者甚至使用$scope.apply后才执行console.log。 （我认为$scope.apply现在对你来说太过分了，你应该忽略它）。底线是 - 你的变量没有为第一次迭代定义，因此你得到了这个结果。

Answer 5

您必须提交形式获取值或使用监视功能

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>

Answer 6

名称2，你在输入框中键入将发生变化。您可以通过添加

{{name2}} 

到你的HTML看到这个

控制器将不会看到NAME2的变化，除非你看它，你可以做到这一点使用$表，将它添加到您的控制器

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

Answer 7

把你的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>