Question

我有一个带有名称和位置的html表单，并将其发布到移动服务表。

<form name="userform" ng-submit="addName(user)">
<p>name:     <input type="text" id="name" ng-model="user.name" /></p>
<p>location: <input type="text" id="location" ng-model="user.location"/></p>
<button id="btn-add-evangelist">Add to list</button>
</form>

这就是我从Angular

中的表单中检索数据的方法

$scope.people = [];
$scope._name     = "Default Name";
$scope._location = "Default Location";
$scope.user = {
  name: function (theName) {
      if (angular.isDefined(theName)) {
          $scope._name = theName;
      }
      return $scope._name;
  },
  location: function (theLocation) {
      if (angular.isDefined(theLocation)) {
          $scope._location = theLocation;
      }
      return $scope._location;
  }};

然而，当我运行html时，位置文本框具有功能代码而不是“默认位置”字符串，名称文本框是空白而不是“默认名称”。

setx cannot be used to include R_HOME in path

我想知道这里有什么不对。任何帮助表示赞赏。

Answer 1

AngularJS工作正常。它基本上采用函数的字符串表示，并将其设置为文本框的值。

如果您需要评估值，则需要通过在函数名后加一个括号来调用函数，如下所示：

＆＃13;

angular.module('myapp', [])
  .controller('myctrl', function($scope) {
    $scope.people = [];
    $scope._name = "Default Name";
    $scope._location = "Default Location";
    $scope.user = {
      name: function(theName) {
        if (angular.isDefined(theName)) {
          $scope._name = theName;
        }
        return $scope._name;
      }(),
      location: function(theLocation) {
        if (angular.isDefined(theLocation)) {
          $scope._location = theLocation;
        }
        return $scope._location;
      }()
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myctrl">
  <form name="userform" ng-submit="addName(user)">
    <p>name: <input type="text" id="name" ng-model="user.name" /></p>
    <p>location: <input type="text" id="location" ng-model="user.location" /></p>
    <button id="btn-add-evangelist">Add to list</button>
  </form>
</div>

＆＃13;

Answer 2

您可以直接将默认值设置为模型，如下所示：

$scope.people = [];
$scope._name     = "Default Name";
$scope._location = "Default Location";
$scope.user = { //set default value to the inputs
     name:$scope._name,
     location:$scope._location
}

Answer 3

如果您使用的是最新版本的角度js。尝试ng-model-options =＆＃34; {getterSetter：true}＆＃34;。

有时将ngModel绑定到getter / setter函数会很有帮助。一个   getter / setter是一个返回模型表示的函数   当使用零参数调用时，并设置a的内部状态   用参数调用时的模型。使用它有时很有用   对于具有与之不同的内部表示的模型   模型暴露给视图的内容。

最佳实践：因为AngularJS是最好的保持快速吸引力   可能比代码的其他部分更频繁地调用它们。您   通过添加ng-model-options =＆＃34; {getterSetter：true}＆＃34;来使用此行为   到附有ng-model的元素。你也可以添加   ng-model-options =＆＃34; {getterSetter：true}＆＃34;到a，哪个会   为其中的所有s启用此行为。请参阅ngModelOptions   更多。

＆＃13;

angular.module('myapp', [])
  .controller('myctrl', function($scope) {
    $scope.people = [];
    $scope._name = "Default Name";
    $scope._location = "Default Location";
    $scope.user = {
      name: function(theName) {
        if (angular.isDefined(theName)) {
          $scope._name = theName;
        }
        return $scope._name;
      },
      location: function(theLocation) {
        if (angular.isDefined(theLocation)) {
          $scope._location = theLocation;
        }
        return $scope._location;
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myctrl">
  <form name="userform" ng-submit="addName(user)">
    <p>name: <input type="text" id="name" ng-model="user.name" ng-model-options="{ getterSetter: true }"/></p>
    <p>location: <input type="text" id="location" ng-model="user.location" ng-model-options="{ getterSetter: true }"/></p>
    <button id="btn-add-evangelist">Add to list</button>
  </form>
</div>

＆＃13;

函数在Angular JS中被视为字符串

3 个答案: