javascript - 动态添加到屏幕输入字段并在 ionic cordova (angularjs) 中对它们的(数字)内容求和

Question

我是 ionic 和 angularjs 的新手。希望能够在单击“插入”时动态插入以下输入字段。

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Add">
    </label>
    <button class="button button-small">
      Insert
    </button>
  </div>
</div>

并保留所有输入数字的总和以在最后添加它们

Answer 1

你可以这样做:

1. 为列表创建一个数组 numbers: []
2. 在数字数组的 ion-list 中使用 ng-repeat
3. 创建一个对所有数字求和的方法。

我的代码中有一点可以改进，那就是插入总是在列表末尾添加新项目。如果您想在单击的 insert 按钮之后添加它，您需要将 $index 作为参数传递给 insert 方法并使用 splice在正确的位置添加新项目。

请查看下面或此 jsfiddle 中的演示.

angular.module('demoApp', ['ionic'])
    .controller('mainController', MainController);

function MainController() {
    var vm = this,
        defaultNumberObj = {
            value: 0
        };
    
    angular.extend(this, {
        numbers: [angular.copy(defaultNumberObj)],
        insert: function () {
            console.log('inserting...');
            vm.numbers.push({
                value: 0
            });
        },
        removeLast: function() {
        	if (vm.numbers.length > 1)
                vm.numbers.pop(1);
        },
        reset: function() {
        	vm.numbers = [angular.copy(defaultNumberObj)];
        },
        calcSum: function () {
            var sum = 0;
            angular.forEach(vm.numbers, function (number) {
                sum += parseInt(number.value) || 0;
            });
            return sum;
        }
    });
}

<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
<ion-header-bar class="bar-positive">
      <div class="buttons">
        <button class="button button-icon icon ion-ios-minus-outline"
          ng-click="ctrl.removeLast()"></button>
      </div>
      <h1 class="title">Result {{ctrl.calcSum()}}</h1>
      <div class="buttons">
        <button class="button" ng-click="ctrl.reset()">
            Reset
        </button>
      </div>
    </ion-header-bar>
<ion-content class="has-header">
    <ion-list>
        <ion-item ng-repeat="number in ctrl.numbers">
            <input type="text" placeholder="Add" ng-model="number.value" />
            <button class="button button-small" ng-click="ctrl.insert()">Insert</button>
        </ion-item>
    </ion-list>total: {{ctrl.calcSum()}}</ion-content>
  </div>