角型JSで文字列として扱われる関数

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> 

、これは私が角度

$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を実行したときただし、場所テキストボックスは、機能コードの代わりに、「デフォルトの場所」の文字列を持っています名前のテキストボックスは「デフォルト名」ではなく空白です。

私はここで間違っていることができるか疑問に思います。どんな助けもありがとうございます。

Answer 1

AngularJSが正しく動作します。基本的には関数の文字列表現を取り、それをテキストボックスの値として設定します。

あなたの代わりに評価値が必要な場合は、このように、関数名の後に括弧を置くことによって機能を呼び出す必要があります：あなたは直接デフォルト値を設定することができ

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

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

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

最新のバージョンの角度jを使用している場合は、次のようにします。 ng-model-options = "{getterSetter：true}"を試してください。

ngModelをgetter/setter関数にバインドすると便利なことがあります。 A getter/setterは、引数がゼロで呼び出されたときにモデル の表現を返し、引数で呼び出されたときに モデルの内部状態を設定する関数です。モデルが とは異なる内部表現を持つモデルの場合、 を使用すると便利です。

ベストプラクティス：AngularJSは がコードの他の部分より頻繁に呼び出される可能性があるため、ゲッターを高速に保つのが最善です。ng-model-options = "{getterSetter：true}" をng-modelが接続された要素に追加することで、この動作を使用します。また、 ng-model-options = "{getterSetter：true}"をaに追加することもできます。 はこの動作を有効にします。詳細については、ngModelOptions を参照してください。あなたの答えで

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

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