AngularJS-ng-modelがコントローラで未定義です

Question

コントローラからng-modelを読み込もうとしていますが、動作できませんでした。それはngモデルが定義されていないと言います。このような問題を解決するために他の人が提供するソリューションを適用しようとしましたが、それでも問題は解決できませんでした。たぶん私は間違ってやっているから。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.apply = function() { 
 
    $scope.name = {} 
 
    var firstName = $scope.name.FirstName; 
 
    alert(firstName); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <button ng-click="apply()" type="button">Apply</button> 
 
    Name: 
 
    <input ng-model="name.FirstName"> 
 
</div>

しかし、アラートが変数 "firstNameのは" 言う "適用" ボタンをクリックした後に定義されていない：

は、私は、次のコードスニペットを持っています。だから私は代わりに次のコードを使用しようとしました。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.apply = function() { 
 

 
    var theFirstname = ""; 
 
    $scope.name = { 
 
     theFirstname: $scope.name.FirstName 
 
    } 
 

 
    alert(theFirstname); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <button ng-click="apply()" type="button">Apply</button> 
 
    Name: 
 
    <input ng-model="name.FirstName"> 
 
</div>

私は、変数 "theFirstname" に$scope.name.FirstNameを割り当てることができませんようにしかし、それはそうです。

Answer 1

nameの初期化をapply()より上に移動します。

name.FirstNameは、nameがすでにスコープで定義されているため、テンプレートから初期化することができます。

あなたのケースでは、$scope.name={}がハンドラで定義されているため、ng-modelがテキストボックスに添付されるまでにnameはundefinedになります。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    // Define the `name` object 
 
    $scope.name = {}; 
 

 
    $scope.apply = function() { 
 
    var firstName = $scope.name.FirstName; 
 
    console.log(firstName); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <button ng-click="apply()" type="button">Apply</button> 
 
    Name: 
 
    <input ng-model="name.FirstName"> 
 
</div>