如何将一个控制器用于具有相同逻辑的多个输入？

Question

我有以下情况，一个表单有多个输入，我需要以相同的方式计算每个输入，但 return 不同字段的值

<div class="row">
        <input type="number" min="1" class="form-control" id="InputValorFOR" placeholder="" ng-change="findModifier()" ng-model="atrb.for">
        <p>{{mod.for}}</p>
</div>
<div class="row">
        <input type="number" min="1" class="form-control" id="InputValorDES" placeholder="" ng-change="findModifier()" ng-model="atrb.des">
        <p>{{mod.des}}</p>
</div>

控制器：

app.controller('atributosCtrl', function($scope){

findModifier = function() {        
    if ($scope.atrb > 1 && $scope.atrb <10)
    {
        if ($scope.atrb % 2 == 0)
        {
            $scope.mod = (($scope.atrb / 2) - 5);
        }        
    }
};    
$scope.$watch('atrb', findModifier); });

我想更改 mod.for 或 mod.des 的值，而不必为每个输入编写控制器。但我不知道如何从我正在修改的输入中传递模型名称

Answer 1

我想你正在期待这样的事情。您可以使用 link 函数编写自定义指令，如下所示

(function () {
    "use strict";
    angular.module("app").directive("notifypropertychanged", notifypropertychanged);
    function notifypropertychanged() {
        var directive = {
            require: "ngModel",
            link: function ($scope, element, attrs, ngModel) {
                $scope.$watch(attrs["notifypropertychanged"], function (newVal, oldVal) {

                    var initialValue = attrs["oldvalue"];

                });
            }
        };
        return directive;
    }
})();

在您的输入上应用此指令

 <input type="number" min="1" class="form-control" notifypropertychanged="atrb.des"  oldvalue=" {{::atrb.des}} " id="InputValorDES" placeholder="" ng-model="atrb.des">

只要值发生变化，它就会触发自定义 watch

希望对您有所帮助

Answer 2

我不知道您到底想要什么，但我对您的代码进行了一些更改以使其正常运行。请在这里评论告诉我你想要什么，我会帮助你。

您的HTML修改：

  <body ng-controller="atributosCtrl">
    <div class="row">
        <input type="number" min="1" class="form-control" id="InputValorFOR" placeholder="" ng-change="findModifier('for')" ng-model="atrb.for">
        <p>{{mod.for}}</p>
    </div>
    <div class="row">
        <input type="number" min="1" class="form-control" id="InputValorDES" placeholder="" ng-change="findModifier('des')" ng-model="atrb.des">
        <p>{{mod.des}}</p>
    </div>
  </body>

你的JS修改：

app.controller('atributosCtrl', function($scope){
  $scope.atrb = {
    for: null,
    des: null
  };
  $scope.mod = {
    for: null,
    des: null
  };

  $scope.findModifier = function(type) {
    $scope.mod[type] = null;
    if ($scope.atrb[type] > 1 && $scope.atrb[type] <10)
    {
        if ($scope.atrb[type] % 2 === 0)
        {
            $scope.mod[type] = (($scope.atrb[type] / 2) - 5);
        }        
    }
  }
});

笨蛋： https://plnkr.co/edit/aCNJQyfYXZ5vU1rc381S

如何将一个控制器用于具有相同逻辑的多个输入？

How to use one controller for multiple inputs with the same logic?

forms

angularjs

angularjs-ng-model