javascript - 将 ng-models 合并在一起

Question

我对此还是个新手，很容易忘记。我正在开发一个项目，该项目具有各种下拉(选择)菜单，并且每个菜单都有单独的值。我怎样才能将它们全部加在一起。

这是我到目前为止所拥有的 2 个下拉菜单示例，但最终将有大约 30 个。请告诉我哪里出错了。

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

以 JS 为

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

内部不需要多个 Controller <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>