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的变量。然后，您可以访问某个对象obj属性，例如var propertyValue = obj[propertyName]。

这应该可以解决问题。如果您保持相同的命名约定，则元素的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

＆＃39;更好＆＃39;解决方案是编写一个自定义指令，将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。

从回调函数更改模型值

2 个答案: