Wayne Gilliver Wayne Gilliver - 4 months ago 28
Javascript Question

sum ng-models together angularjs

I am new to this still and forget quite easy. I am working on a project that has various dropdown (select) menus and with a separate value for each. How can I add them all together.

This is what I have so far with 2 samples of the dropmenu but eventually there will be about 30. Please tell me where i am going wrong.

<table>

<tr ng-controller="myCTRL">
<td><select ng-model="myOptionOP" ng-options="value.armour as value.label for value in myOptionsOP"></select></td>
<td align=left width=200>Base Armour: {{myOptionOP}}</td>

<tr ng-controller="myCTRL">
<td><select ng-model="myOptionWH" ng-options="value.armour as value.label for value in myOptionsWH"></select></td>
<td align=left width=200>Base Armour: {{myOptionWH}}</td>

<tr ng-controller="myCTRL">
<td align=left width=200>Total: {{total}}</td>


</table>


with JS as

var appBubble = angular.module('myExample', []);

function myCTRL($scope) {
$scope.myOptionsOP = [
{"armour": 1000, "label": "1"},
{"armour": 2000, "label": "2"},
{"armour": 4000, "label": "3"},
{"armour": 8000, "label": "4"},
{"armour": 16000, "label": "5"},
{"armour": 32000, "label": "6"},
{"armour": 64000, "label": "7"},
{"armour": 750000, "label": "8"}];

$scope.myOptionsWH = [
{"armour": 1001, "label": "1"},
{"armour": 2001, "label": "2"},
{"armour": 4001, "label": "3"},
{"armour": 8001, "label": "4"},
{"armour": 16001, "label": "5"},
{"armour": 32001, "label": "6"},
{"armour": 64001, "label": "7"},
{"armour": 750001, "label": "8"}];

$scope.total = $scope.myOptionsOP.armour + $scope.myOptionsWH.armour;


};


https://jsfiddle.net/0zLnhtpn/5/

Answer

No need multiple controller inside <tr>

var appBubble = angular.module('myExample', []);

function myCTRL($scope) {
    $scope.myOptionsOP = [
    {"armour": 1000, "label": "1"},
    {"armour": 2000, "label": "2"},
    {"armour": 4000, "label": "3"},        
    {"armour": 8000, "label": "4"},  
    {"armour": 16000, "label": "5"},    
    {"armour": 32000, "label": "6"},  
    {"armour": 64000, "label": "7"},    
    {"armour": 750000, "label": "8"}];
    
    $scope.myOptionsWH = [
    {"armour": 1001, "label": "1"},
    {"armour": 2001, "label": "2"},
    {"armour": 4001, "label": "3"},        
    {"armour": 8001, "label": "4"},  
    {"armour": 16001, "label": "5"},    
    {"armour": 32001, "label": "6"},  
    {"armour": 64001, "label": "7"},    
    {"armour": 750001, "label": "8"}];

  //  $scope.total = $scope.myOptionsOP.armour + $scope.myOptionsWH.armour;


};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app="myExample" ng-controller="myCTRL">

<tr >
    <td><select ng-model="myOptionOP" ng-options="value.armour as value.label for value in myOptionsOP"></select></td>
    <td align=left width=200>Base Armour: {{myOptionOP}}</td>

<tr >
    <td><select ng-model="myOptionWH" ng-options="value.armour as value.label for value in myOptionsWH"></select></td>
    <td align=left width=200>Base Armour: {{myOptionWH}}</td>

<tr >
    <td align=left width=200>Total: {{myOptionOP+myOptionWH}}</td>


</table>

Comments