Javascript 显示基于所选选项的Div（带计算值）-角度

我对Angular是个新手，正在尝试构建一个简单的应用程序来自学。我有以下选择选项，目前只显示数据对象的键。我要做的是在每个团队的第二个选择框下面显示一个值，当选择第一个选项时，该值显示与键关联的值，然后在选择第二个选项时添加到该值。我该怎么做呢？ 我尝试{{v}}只为第一个，但没有工作，我仍然需要添加第二个

<div>Team 1</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem1">
    <option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
Player 2:
<select class="form-control" ng-model="selectedItem2">
    <option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<br>
<br>
<br>
<div>Team 2</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem3">
    <option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>Player 2:
<select class="form-control" ng-model="selectedItem4">
    <option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<div ng-show="k == v">{{v}}</div>

1队

玩家1：
{{k}
玩家2：
{{k}






第二小组

玩家1：
{{k}
玩家2：
{{k}
{{v}

值将放在团队的两个框中

更新： 这对我有用

$scope.calc = function() {
        $scope.calculatedValue = Number($scope.selectedItem1);
        if($scope.selectedItem2){
                $scope.calculatedValue = Number($scope.selectedItem1) + Number($scope.selectedItem2);

        }

    }

    $scope.calc2 = function() {
        $scope.calculatedValue2 = Number($scope.selectedItem3);
        if ($scope.selectedItem4) {

        $scope.calculatedValue2 = Number($scope.selectedItem3) + Number($scope.selectedItem4);
        };

    }

<div>Team 1</div>
    <br> Player 1:
    <select class="form-control" ng-model="selectedItem1" ng-change="calc()">
        <option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
    </select>
    Player 2:
    <select class="form-control" ng-model="selectedItem2" ng-change="calc()">
        <option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
    </select>
    <!-- show value here -->
    <p> Total Value: {{calculatedValue}} </p>
    <br>
    <br>
    <br>
    <div>Team 2</div>
    <br> Player 1:
    <select class="form-control" ng-model="selectedItem3" ng-change="calc2()">
        <option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
    </select>Player 2:
    <select class="form-control" ng-model="selectedItem4" ng-change="calc2()">
        <option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
    </select>
    <!-- show value here -->
    <p> Total Value: {{calculatedValue2}} </p>

$scope.calc=function（）{
$scope.calculatedValue=Number（$scope.selectedItem1）；
如果（$scope.selectedItem2）{
$scope.calculatedValue=Number（$scope.selectedItem1）+Number（$scope.selectedItem2）；
}
}
$scope.calc2=函数（）{
$scope.calculatedValue2=编号（$scope.selectedItem3）；
如果（$scope.selectedItem4）{
$scope.calculatedValue2=编号（$scope.selectedItem3）+编号（$scope.selectedItem4）；
};
}
第一队

玩家1：
{{k}
玩家2：
{{k}
总值：{{calculatedValue}}







第二小组

玩家1：
{{k}
玩家2：
{{k}
总值：{{calculatedValue2}

我根据你的例子制作了一把小提琴。您需要向select表单添加一个更改事件，以告知控制器计算值，并在$scope上创建一个新属性，该属性存储计算出的值，该值可以绑定到html中

HTML

需要注意的一点是，您需要设置selectedItem1和selectedItem2的默认值，否则更改事件将不知道如何计算未更改选择的非数字未定义值

下面是一个基于您的代码的工作示例： 有几件事

第一：在选项中使用ng repeat通常不是您想要的方式，您希望在select元素上使用ng选项。但这不是一个大问题

<select class="form-control" ng-options="data.displayValue for data in data.playerInfo" ng-model="selectedItem4">

这将显示在select“data.displayValue”上，它可以是playerInfo对象上的任何属性。它会将selectedItem4设置为实际的数据对象

第二：在div中，您使用的是ng repeat中的k和v变量。ng repeat创建自己的范围，范围变量k和v在repeat之外不可访问，每个ng repeat使用自己的k和v。如果要在ng repeat之外使用所选值，则需要将其设置为范围变量。幸运的是，有了这个选项，您可以在我设置值字段时执行此操作

<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>

{{k}

ng options在幕后为您完成了这一任务。这将把您的模型绑定到当前显示的选项。因此，如果此选项位于此选择下，则selectedItem4将设置为所选选项的值

<select class="form-control" ng-model="selectedItem4">

如果你把它改成

<div >{{selectedItem4}}</div>

{{selectedItem4}

---

这应该能起作用，稍微好一点。

谢谢，这非常有帮助！如何在选择第一个项目时立即显示结果，然后在选择第二个项目时更新结果？更新我的代码以显示我的解决方案。任何关于如何重构以将这两个函数抽象为一个函数的建议都将不胜感激！您正在进行检查，以确保已填写第二个选项，以避免从calc方法返回的NaN。我建议将这两个选项都设置为默认值：//这些选项应设置为默认值$scope.selectedItem1=0$scope.selectedItem2=0；有什么原因使这些数字在默认情况下不能设置为0吗？我用一个更简单的解决方案更新了fiddle。我不喜欢在视图中使用函数，但如果没有更多的代码知识，这是一个不错的解决方案。

<select class="form-control" ng-model="selectedItem4">

<div >{{selectedItem4}}</div>