如何從輸入框中獲取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>