如何在更改时显示ng-repeat元素的总和？

I have a ng-repeat generated set of <Select> which contain a numerical value. I want their overall numerical sum to be displayed whenever one <Select> is changed by the user. {{option.score}} represents the numerical value I wish to allot into a total.

我有一个ng-repeat生成的,就会显示它们的总数值和。 {{option.score}}表示我希望分配给总数的数值。

Image:

https://cdn.pbrd.co/images/NGg0gJn.png

Template:

    <label class="item item-input item-select" ng-repeat="criteria in tool.criterias">
        <div class="input-label">
            {{criteria.desc}}
        </div>
        <select>
            <option ng-repeat="option in criteria.options">
                {{option.score}} &mdash; {{option.answer}}
            </option>
        </select>
    </label>
    ...
    <p>Total: the sum of all the option.score's</p>

Controller:

.controller('FullToolsCtrl', function ($scope, $stateParams, Tools) {
  $scope.tool = Tools.get($stateParams.toolId);
});

Data:

{
  "criterias": [
    {
      "desc": "Complexion",
      "options": [
        {
          "answer": "Blue or Pale all over",
          "score": "0"
        },
        {
          "answer": "Blue at extremities",
          "score": "1"
        },
        {
          "answer": "No cyanosed body or extremities",
          "score": "2"
        }
      ]
    },
    {
      "desc": "Pulse",
      "options": [
        {
          "answer": "Absent",
          "score": "0"
        },
        {
          "answer": "< 100",
          "score": "1"
        },
        {
          "answer": "> 100",
          "score": "2"
        }
      ]
    },
    {
      "desc": "Grimace",
      "options": [
        {
          "answer": "No response to stimulation",
          "score": "0"
        },
        {
          "answer": "Grimace on suction or aggressive stimulation",
          "score": "1"
        },
        {
          "answer": "Cry on stimulation",
          "score": "2"
        }
      ]
    },
    {
      "desc": "Activity",
      "options": [
        {
          "answer": "Absent",
          "score": "0"
        },
        {
          "answer": "Some flexion",
          "score": "1"
        },
        {
          "answer": "Flexed arms and legs resist extension",
          "score": "2"
        }
      ]
    },
    {
      "desc": "Respiratory effort",
      "options": [
        {
          "answer": "Absent",
          "score": "0"
        },
        {
          "answer": "Weak, irregular, gasping",
          "score": "1"
        },
        {
          "answer": "Strong, lusty cry",
          "score": "2"
        }
      ]
    }
  ],
  "desc": "Scoring tool for neonates.",
  "name": "APGAR Score"
}

2 个解决方案

#1

try something like this:

尝试这样的事情:

var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
  $scope.total = 0;
  $scope.selectValue = [];
  $scope.SumValue = function() {
    $scope.total = 0
    for (var i = 0; i < $scope.selectValue.length; i++) {
      if ($scope.selectValue[i] != undefined)
        $scope.total += parseInt($scope.selectValue[i]);
    }

  }
  $scope.data = {
    "criterias": [{
      "desc": "Complexion",
      "options": [{
        "answer": "Blue or Pale all over",
        "score": "0"
      }, {
        "answer": "Blue at extremities",
        "score": "1"
      }, {
        "answer": "No cyanosed body or extremities",
        "score": "2"
      }]
    }, {
      "desc": "Pulse",
      "options": [{
        "answer": "Absent",
        "score": "0"
      }, {
        "answer": "< 100",
        "score": "1"
      }, {
        "answer": "> 100",
        "score": "2"
      }]
    }, {
      "desc": "Grimace",
      "options": [{
        "answer": "No response to stimulation",
        "score": "0"
      }, {
        "answer": "Grimace on suction or aggressive stimulation",
        "score": "1"
      }, {
        "answer": "Cry on stimulation",
        "score": "2"
      }]
    }, {
      "desc": "Activity",
      "options": [{
        "answer": "Absent",
        "score": "0"
      }, {
        "answer": "Some flexion",
        "score": "1"
      }, {
        "answer": "Flexed arms and legs resist extension",
        "score": "2"
      }]
    }, {
      "desc": "Respiratory effort",
      "options": [{
        "answer": "Absent",
        "score": "0"
      }, {
        "answer": "Weak, irregular, gasping",
        "score": "1"
      }, {
        "answer": "Strong, lusty cry",
        "score": "2"
      }]
    }],
    "desc": "Scoring tool for neonates.",
    "name": "APGAR Score"
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
  <div ng-controller="AppController">
    <div ng-repeat="criteria in data.criterias">
      <label>
        {{ criteria.desc }}
      </label>
      <br/>
      <select ng-model="selectValue[$index]" ng-change="SumValue()">
        <option ng-repeat="option in criteria.options" value="{{option.score}}">{{option.answer}}</option>
      </select>
    </div>
    <p>Total: the sum of all the option.score's {{ total }}</p>
  </div>
</div>

JSFiddle: https://jsfiddle.net/d42jeuvs/15/

Hope this is what you wanted. Thanks.

希望这是你想要的。谢谢。

#2

There's nothing really built into ng-repeat to deal with this and you're actually outside of the ng-repeat construct when you want your total to appear. Generally you would just bind an expression in your HTML to a function call in your controller. Something like:

没有真正构建到ng-repeat中来处理这个问题,当你希望你的总数出现时,你实际上在ng-repeat构造之外。通常,您只需将HTML中的表达式绑定到控制器中的函数调用。就像是:

<p>Total: the sum of all the option.score's  {{total)()}}</p>

(where $ctrl is your controller).

(其中$ ctrl是你的控制器)。

Then in your controller you'd have a function mapped to it with something like:

然后在你的控制器中你有一个映射到它的函数,例如:

$scope.total = function() { var total = 0 angular.forEach($scope. criteria.options, function(criteria) { total+= criteria.score } return total };

$ scope.total = function(){var total = 0 angular.forEach($ scope。criteria.options,function(criteria){total + = criteria.score} return total};

If you're using controllerAs syntax it'd be slighltly different.

如果你使用的是控制器语法,它就会略有不同。

#1