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>

但是，似乎我无法将$scope.name.FirstName分配给变量“theFirstname”。

Answer 1

将name的初始化移至apply()以上。

通过执行此操作，可以从模板初始化name.FirstName，因为name已在范围内定义。

在您的情况下，$scope.name={}在处理程序中定义，因此name在undefined附加到文本框时为ng-model。

＆＃13;

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);
  };
});

＆＃13;

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

＆＃13;

AngularJS - ng-model在控制器中未定义

1 个答案: