sum ng-models zusammen angularjs

Question

Ich bin neu dazu noch und vergesse ganz einfach. Ich arbeite an einem Projekt, das verschiedene Dropdown-Menüs (Auswahlmenüs) und jeweils einen separaten Wert enthält. Wie kann ich sie alle zusammen hinzufügen?

Das ist, was ich bisher mit 2 Proben des dropmenu, aber schließlich wird es etwa 30 sein. Bitte sagen Sie mir, wo ich falsch liege.

<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> 

mit JS als

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 1

No müssen mehrere Controller innerhalb <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>

Answer 2

Keine Notwendigkeit, diese mehrere Controller versuchen zu haben -

Fiddlehttps://jsfiddle.net/chetandoke/f2hukxg2/1/