コールバック関数

Question

からモデル値を変更し、私は私が」を取得することにより、スイッチのコマンドを避けたい、次の入力

<input id="mainOdd1Id" type="number" ng-model="data.mainOdd1" min="0" step="any" ng-attr-placeholder="{{data.mainOdd1}}" ng-focus="focus($event)" ng-blur="blur($event)"> 

ぼかし

$scope.blur = function($event){ 

    var id = $event.target.getAttribute('id'); 

    switch(id) { 
    case "mainOdd1Id": 
     $scope.data.mainOdd1 = func($scope.data.mainOdd1); 
     break; 
    case "mainOdd2Id": 
     $scope.data.mainOdd2 = func($scope.data.mainOdd2); 
     break; 
    case "bkOdd1Id": 
     $scope.data.bkOdd1 = func($scope.data.bkOdd1); 
     break; 
    case "bkOdd2Id": 
     $scope.data.bkOdd2 = func($scope.data.bkOdd2); 
     break;    
    default: 
     break; 
    } 
} 

上で実行以下の機能を持っていますIDによってデータフィールドに「ポインタ」を置き換えて変更します。 （* pointer = function（* pointer））

それは可能ですか？

ありがとうございます。

Answer 1

ブラケット表記を使用して名前でプロパティにアクセスできます。

プロパティ名がpropertyNameの変数があるとします。次にvar propertyValue = obj[propertyName]のようなオブジェクトobjの一部のオブジェクトにアクセスできます。

これはトリックを行う必要があります。あなたは同じ命名規則残っている場合は、その要素のidはちょうどpropName + 'Id'

$scope.blur = function($event){ 
    // convert mainOdd1Id -> mainOdd1 
    var id = $event.target.id.replace(/Id$/, ''); 

    if(id in $scope.data) { // check if prop is in scope.data 
    $scope.data[id] = func($scope.data[id]); // perform update 
    } 
} 

であるか、「より良い」ソリューションは、添付カスタムディレクティブを書くことであるテンプレート

<input id="mainOdd1Id" ... ng-focus="focus('mainOdd1')" ng-blur="blur('mainOdd1')"> 


$scope.blur = function(propertyName){ 
    $scope.data[propertyName] = func($scope.data[propertyName]); 
} 

Answer 2

内から正しいプロパティ名を渡すことができますディレクティブを使用する要素のfunc〜ngModelController.$parsers。

module.directive('applyFunc', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attr, ngModel) { 
      ngModel.$parsers.push(func); 

      function func() { ... } 
     } 
    }; 
}); 

次に、あなたのHTMLは次のようになります。

<input id="mainOdd1Id" type="number" ng-model="data.mainOdd1" 
    min="0" step="any" 
    ng-attr-placeholder="{{data.mainOdd1}}" ng-focus="focus($event)" 
    apply-func > 

あなたは、各パーサに別々のディレクティブを書くことができますいずれか、またはあなたが属性からとしての機能を取る一般的なものを書くことができます。

詳しくはhttps://stackoverflow.com/a/12947995/107660、詳しくはhttps://docs.angularjs.org/api/ng/type/ngModel.NgModelControllerを参照してください。