根据选择的选项显示一个Div(带有计算值)——Angular

Showing a Div (with calculated values) based upon options selected - Angular

本文关键字：Div 计算 Angular 一个 选择 选项 显示      更新时间：2023-09-26

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

Values将放在team的两个方框下面。

更新:这对我很有效!

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

我根据您的示例组合了一个小提琴。你需要在select表单中添加一个change事件，告诉你的控制器计算这些值，并在$scope上创建一个新属性来存储计算出来的值，这个属性可以绑定到html中。

HTML 

 <select class="form-control" ng-model="selectedItem1" ng-change="calc()">
    <option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>

JS 

// these should be set to default number values
$scope.selectedItem1 = 0;
$scope.selectedItem2 = 0;
$scope.data = {
    playerInfo : {
        a:1,
        b:2,
        c:3
    }
};
// this method will calculate the value
$scope.calc = function(){
    $scope.calculatedValue = parseFloat($scope.selectedItem1) + parseFloat($scope.selectedItem2);
}

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

下面是一个基于你的代码的工作示例:https://jsfiddle.net/gu9fm5xh/1/

所以有几件事，

首先:在选项中使用ng-repeat通常不是你想要的方式，你应该在select元素中使用ng-options。但这不是一个大问题。

<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之外使用选定的值，你需要将它们设置为作用域变量。幸运的是，有了选项，你可以通过设置value字段来做到这一点。

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

ng-options在幕后为你做这些。这将把你的selects ng-model绑定到当前显示的选项。因此，如果这个选项在这个select下，那么selectedItem4将被设置为所选选项的值。

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

如果你把它改成

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

应该可以工作，稍微好一点。

相关文章：