当数字框的值在 AngularJS 中更改时更改下拉列表的值

Question

假设我有两个输入：一个数字字段和一个下拉列表：

<input name="nameForNumberField" ng-model="pizzaBox.numSlices" type="number" ng-change="onNumSlicesChanged()"/>

<select id="nameForDropdown" data-ng-model="pizzaBox.selectedPizzaSize" ng-options="x for x in pizzaBox.pizzaSizes"></select>

我认为 8 片或更少片的披萨盒是小的，8 片以上的披萨盒是大的。默认情况下，披萨盒有 5 片，因此很小。

$scope.pizzaBox = { 
numSlices: 5, 
pizzaSizes: ["Small", "Large"], 
selectedPizzaSize: "Small" 
};

$scope.onNumSlicesChanged = function () {
    if ($scope.pizzaBox.numSlices <= 8) {
        $scope.selectedPizzaSize = "Small";
    }
    else {
        $scope.selectedPizzaSize = "Large";
    }
};

我想要的是，当我将数字字段更改为大于 8 的数字时，我希望下拉列表的值从小切换到大。类似的，如果数字框里的数字大于8，下拉框的值很大，当我把数字值改成4的时候，我期望下拉框的值由大变小。

我尝试了上面概述的代码。发生的事情是，当我更改数字字段中的数字时，下拉列表中选择的值根本没有改变。我能够更改下拉列表值的唯一方法是单击下拉列表并手动更改它。我只想在前端已经通过上面概述的逻辑默认为它选择的披萨大小之后这样做。

我希望当我更改数字字段中的值时，下拉列表中的值将根据描述的逻辑自动更改。

Answer 1

您想引用 $scope.pizzaBox.selectedPizzaSize，而不是 $scope.selectedPizzaSize

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.pizzaBox = {
      numSlices: 5,
      pizzaSizes: ["Small", "Large"],
      selectedPizzaSize: "Small"
    };

    $scope.onNumSlicesChanged = function() {
      if ($scope.pizzaBox.numSlices <= 8) {
        $scope.pizzaBox.selectedPizzaSize = "Small";
      } else {
        $scope.pizzaBox.selectedPizzaSize = "Large";
      }
    };
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input name="nameForNumberField" ng-model="pizzaBox.numSlices" type="number" ng-change="onNumSlicesChanged()" />
  <select id="nameForDropdown" data-ng-model="pizzaBox.selectedPizzaSize" ng-options="x for x in pizzaBox.pizzaSizes"></select>
</div>

当数字框的值在 AngularJS 中更改时更改下拉列表的值

Changing the value of a dropdown when the value of a number box changes in AngularJS

html

javascript

frontend

angularjs