如何使用onblur或onchange事件在角度js中添加动态文本框值

Question

[！[请找我的屏幕截图]

[！1]]]

1

<div style="background-color:#FFFFFF;min-height:color:#FFFFFF">
      <div style="background-color:#FFFFFF;height:40px;" > </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">                  
            <input type="text" placeholder="Material Name" ng-model="thingstodo[0].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[0].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[1].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[1].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[2].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[2].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[3].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[3].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[4].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[4].cost">
          </label>
        </div>
      </div>
      <div class="row" data-ng-repeat="rowContent in rows">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" placeholder="Material Name" ng-model="thingstodo[rowContent].mname">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[rowContent].cost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col" align="center"> </div>
        <div class="col col-75" align="right"> <i class="font25 icon ion-ios-plus-outline" ng-click="addRow()"></i>&nbsp;&nbsp;&nbsp;<i class="font25 icon ion-ios-minus-outline" ng-click="deleteRow($index)"></i></div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" readonly value="Labour Charges">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.labourcost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col col-75">
          <label class="item item-input">
            <input type="text" readonly value="Service Charges">
          </label>
        </div>
        <div class="col">
          <label class="item item-input">
            <input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.servicecost">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button class="button button-block button-balanced">{{thingstodo[0].cost + thingstodo[1].cost + thingstodo[2].cost + thingstodo[3].cost + thingstodo[4].cost + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}.00 RS</button>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button class="button button-block button-dark" ng-click="collectData()">Confirm</button>
        </div>
      </div>
    </div>

我想添加{{thingstodo [0] .cost + thingstodo 1。cost + thingstodo [2] .cost + thingstodo [3] .cost + thingstodo [4] .cost + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}并且还想添加动态文本框值{{thingstodo [rowContent] .cost}}

Answer 1

按如下方式创建过滤器

angular.module('app', []).filter('totalCost', function() {
  return function(inputs) {
    var sum = 0;
    angular.forEach(inputs,function(v,k){
        sum = sum + parseInt(v.cost);
    }); 
    return sum ;
  };
});

然后使用以下表达式

{{(thingstodo|totalCost) + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}