使用onblur或onchange事件在角度js中添加文本值

时间:2015-10-29 09:26:34

标签: angularjs

  <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">0.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>

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

2 个答案:

答案 0 :(得分:0)

我不完全确定问题是什么,但我会尽力给你答案以帮助解决问题。

如果您只想在数字更改时添加费用 - 您不需要使用if (document.body.scrollTop > 150 ) {....,您可以使用数据绑定自动计算数字:

见这里:http://jsfiddle.net/AshCoolman/8qnxukuh/2/

答案 1 :(得分:0)

我想我知道你想要什么。

检查一下:

app.filter('range', function () {
    return function (input, total) {
        total = parseInt(total);
        for (var i = 0; i < total; i++)
            input.push(i);
        return input;
    };
});

HTML:

<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="rows">

<div ng-repeat="row in [] | range: rows">
   <input type="number" ng-model="thingstodo[$index].cost" />
</div>

工作演示:http://plnkr.co/edit/AbenOQGSSZyfCDVmd6ww