Я новичок в этом и забываю довольно легко. Я работаю над проектом, который имеет различные выпадающие меню (меню) и с отдельным значением для каждого. Как я могу добавить их все вместе.
Это то, что у меня есть до сих пор с двумя образцами dropmenu, но в конце концов будет около 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 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;
};
Нет необходимости в нескольких контроллерах внутри <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>
Нет необходимости иметь несколько контроллеров, попробуйте это -