Angularjs-我们如何通过动态ng模型名称监视ngRepeat中的动态元素，并在发生任何更改时过滤元素值？

Question

I have banged my head against a cement pillow trying to figure out dynamic content. Not just in watching or observing dynamic content, but also a dynamic directive I can practically use on any input. Here is an example case...

<tbody>
  <tr ng-repeat="(rowIndex, tableRow) in paymentData.lineItems" ng-hide='false' ng-class="{ paymentrow:  markedForPay[rowIndex] == true }">
    <td>Other td's</td>

    <td class="table-row row-gray">
      <input type="text" class="someClass" placeholder='$0.00' ng-model="tableRow.amount" />
    </td>
  </tr>
</tbody>

• We don't know each input's ng-model name, on load or at any time.

• We don't easily have all the inputs to sum over as the user types in each input, or deletes in each input.

• We would like to have MANY input fields, created with an ng-repeat, so sum themselves whenever a user types in ANY of the payment amount input td's.

Something like "Hey table, can you give me each row's value? Also, can you store them in a fashion so that I can know what row they are associated with? Oh, and I will need the most recent values only.

So if the input contains .34 and the user deletes the four, I need that new change immediately, or any change to any payment amount input.

Answer 1

I am new to Angularjs. If I just created something that exists in Angularjs already, please let me know with a hug. (I do understand there is an Angular pre-built filter for currency). I do not apologize for writing so much, I prefer for you to have EVERYTHING you need to implement this yourself. Or at least improve on the code I just provided.

I have banged my head against a cement pillow trying to figure out dynamic content. Not just in watching or observing dynamic content, but also a dynamic directive I can practically user on any input. Here is an example case...

<tbody>
  <tr ng-repeat="(rowIndex, tableRow) in paymentData.lineItems" ng-hide='false' ng-class="{ paymentrow:  markedForPay[rowIndex] == true }">

    <td class="table-row row-gray">
      <input type="text" watch-dynamic-input="{ index: {{ rowIndex }}, name: 'accountsTableAmountValues', filter: 'usCurrency'}" class="someClass" placeholder='$0.00' ng-model="tableRow.amount" />
    </td>
  </tr>
</tbody>

I would like to watch any number of inputs on any change. In this example, so that I can SUM the value of each row's input under a specific header: or any input by just adding an angularjs element directive: type of 'A'.

I will never know the model name from the start, and each input may be embedded even further in an ngRepeat: which is the case I had, but since it's irrelevant to this example I did not include other nested ngRepeats I had in this table. In fact, all you get is just the one input for this example.

At first I created just a dynamic filter for the view value. I didin't have dbl curlies {{}} to use this filter type {{ money | usCurrency }} as each input does not use {{}}.

I didn't want to cram a bunch of logic in the current directive, trying to figure out what each model name is, and then try to bind to it with a $watch function. So I cam up with this first...

A dynamic filter directive for 'probably' any HTML element (only tested and used on form inputs).

Here is the filter I was going to use just for your reference...

.filter('usCurrency', [function () {
  return function (amount) {
    amount = amount.toString().replace(/\D/g, '');
    if(amount.length <= 0){
      return amount.replace(/.+/, '');
    }else{
      if(amount.length == 1){
        return amount.replace(/^/, '$ ').replace(/(\d{1})$/, '.$1');
      }else{
        return amount.replace(/^/, '$ ').replace(/(\d{2})$/, '.$1');
      }
    }
  };
}])

Here is the HTML again as stated above but only the input element for clarity...

<input type="text" filterElement='usCurrency' class="anyClass" placeholder='$0.00' ng-model="tableRow.amount" />

Here is the dynamic directive to ONLY filter ANY input change and add newest value to ngModel, and the actual HTML view element, in this case the actual input cell. As you can see

app.directive('filterElement', ['$filter', function($filter){

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: '?ngModel', // ? gets parent scope if it exists.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return };

      scope.$watch(attrs.ngModel, function(value){
        if( value == undefined ){ return };
        ngModel.$setViewValue($filter( attrs.rsFilterElement )( value )); // Sets ngModelView and ngViewValue
        attrs.$$element[0].value = $filter( attrs.rsFilterElement )( value ); // I would prefer to not have to do this step. Any ideas?
      });
    }
  }
}]);

So now by just adding filterElement='yourfilternamecasesensativeasstring' to any input, you can filter any dynamic input model on any change and set the new values of ngModel and the viewed element. You could take it a little further and just filter one or the other if your use case dictates changing say only the element value and not the ngModel. <-- I have not thoroughly tested this statement, but it makes sense that ngModel.value is different than $$element[0].value as the directive requires both to make a change to the ngModel value AND the element value.

However, this did not satisfy another thing I needed to do: which was to sum ALL inputs of the table on ANY or their specific inputs being changed. I needed a controller variable that could be accessed by multiple functions at any time. So I chose to do the example below, which builds upon all the above code. I will provide only code with changes.

First create an object literal in your controller:

$scope.accountsTableAmountValues = {};

This object will contain all of our HTML elements that contain our 'A' type directive.

Here is the HTML using the directive as well as a few items to pass in and utilize.

<input type="text" watch-dynamic-input="{index: {{ rowIndex }}, name: 'accountsTableAmountValues', filter: 'usCurrency'}" ng-change='selected_to_pay(rowIndex)' class="table-text-field-white payment-field-font-color" placeholder='$0.00' ng-model="tableRow.amount" />

First we introduce the directive to dynamically created input(s) by adding

watch-dynamic-input="index: ng-repeat index number, name: this is the variable name you created in the controller, without the leading $scope, and as string, filter: this can either be a filter name as a string and case sensitive, or just NULL if you don't want to use a filter here.

We add the index of the ng-repeat first by creating {{ rowIndex }}. If we used just rowIndex without curly braces, then the first index number would be created for each input. By using curly's here, rowIndex becomes each instance of ng-repeat and ads each row's index.

Then we just add in the string name of the object we created in our controller, in this case our object, if you recall was '$scope.accountsTableAmountValues = {};' We just need the key as a string, which becomes ...name: 'accountsTableAmountValues'.

Now we can also filter since we are watching each input, instead of adding the first directive I showcased above: 'filterElement'. We just add the filter name at the end ...filter: 'usCurrency' or just add null if you don't want to include a filter.

So this :

watch-dynamic-input="{index: {{ rowIndex }}, name: 'accountsTableAmountValues', filter: 'usCurrency'}"

uses this :

app.directive('watchDynamicInput', ['$filter', function($filter){

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: '?ngModel', // ? makes looking for controller on parent element.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return }; // If there is no ngModel, then forget everthing else, and just return.  This may be redundant and better off in the $watch function. Haven't tested yet.

      scope.$watch(attrs.ngModel, function(value){
      // Above, let's watch THIS ROW's ng-model="tableRow.amount"; whatever that value might be.  We don't care now because it's all dynamic, upon page render will be undefined at first, then whatever the user types or deletes.  Who cares!!!  

      if( value == undefined ){ return };  // if you are not yet defined, then return.  I'll catch you on the next input change and check again.  It's OK, we are best friends.  

      // We make a local for improved readability, and faster code.
      // Also, the below code transforms our passed in string of: 
      // "{index: {{ rowIndex }}, name: 'accountsTableAmountValues', filter: 'usCurrency'}"
      // into an actual object literal thus becomes...
      // {index: {{ rowIndex }}, name: 'accountsTableAmountValues', filter: 'usCurrency'}

      var passed_object = scope.$eval(attrs['watchDynamicInput'])

      // and now this works passed_object.index or passed_object.name

      // We allow dynamic filters, or we don't-a as a NULL can be passed into HTML || a filter name
      value = passed_object.filter ? $filter(passed_object.filter)(value) : value;

      // We set the THIS model value to new value (filtered or not, whatever: we're easy like that)
      ngModel.$setViewValue(value);

      // We have to set the element value as well or the filter amount will not display in input
      // I think I am strong arming this.  I just want the ACTUAL element value to match the ngModel.
      attrs.$$element[0].value = value; 

      // Now we just add the new value to our object literal we created in the controller.
      // It will always create a key if nothing is in the object, or it will write over the current value.  If you require ALL inputs old and new you could rewrite and use an array.

      scope[passed_object.name][passed_object.index] = value;

      // This object would now look something like {0: 'row0inputvalue', 1: 'row1inputvalue' etc...}
    });
  }
}

}]);

Now I just watch my object, in this case $scope.accountsTableAmountValues, in any directive I want. In this case I have added the example below of what I do with this object.

scope.$watch('accountsTableAmountValues', function(amounts){
// You can do what you want now.  I iterate of amounts and sum the values
// and then transfer the result to my $scope.grandTotal in my controller.
// Now I have a way of ALWAYS summing the total on ANY input change to payment amount column inputs
// that were created without knowing the ng-model name or how many there may be.  

}, true); // The true setting here checks the new version to the old version. I need this for my example, but you may not.  

If you have additions please let me know. Or improvements. We are always learning my friend.

Answer 2

To display the sum of all td values, set the ng-model of the total sum element to a function

<span id="totalSum" ng-model="calculateSum()"></span>

that iterates over the paymentData.lineItems array to sum up all of the td amounts.

$scope.calculateSum = function()
{
   var sum = 0;
   for(var i=0; i<$scope.paymentData.lineItems.length; i++)
   {
      sum += $scope.paymentData.lineItems[i];
   }

   return sum;
}

To find each row's value, you just need to know the rowIndex. Then use $scope.paymentData.lineItems[rowIndex].amount