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

这是因为您没有初始化控制器内的name2。因此name2时刻范围内没有名为console.log的属性。首次更改输入后，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 {{1}}首先，它会在您在文本框中键入内容后立即获取输入值。

Answer 2

试试这个

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

Answer 3

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

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

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

以及HTML：

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

Answer 4

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

Answer 5

您必须提交表单以获取值或使用监视功能

＆＃13;

function DemoController($scope) {
  $scope.name1 = 'LISA';
 

   
$scope.submitName = function () {
 console.log($scope.name2)
}    
}

＆＃13;

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

＆＃13;

Answer 6

在输入框中输入时，

名称2将发生变化。你可以通过添加

来看到这一点

{{name2}}

到您的HTML

控制器不会看到name2中的更改，除非您注意它，您可以使用$ watch执行此操作，将其添加到您的控制器

   $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>

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

7 个答案: