Digamos que tengo dos entradas: un campo numérico y un menú desplegable:
<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>Consideraría una caja de pizza con 8 rebanadas o menos como pequeña y una caja de pizza con más de 8 rebanadas como grande. De forma predeterminada, la caja de pizza tiene 5 rebanadas y, por lo tanto, es pequeña.
$scope.pizzaBox = { numSlices: 5, pizzaSizes: ["Small", "Large"], selectedPizzaSize: "Small" }; $scope.onNumSlicesChanged = function () { if ($scope.pizzaBox.numSlices <= 8) { $scope.selectedPizzaSize = "Small"; } else { $scope.selectedPizzaSize = "Large"; } };Lo que quiero es que cuando cambie el campo numérico a un número mayor que 8, espero que el valor del menú desplegable cambie de Pequeño a Grande. De manera similar, si el número en el cuadro numérico es mayor que 8 y el valor desplegable es grande, cuando cambio el valor numérico a 4, espero que el valor desplegable cambie de Grande a Pequeño.
Probé el código descrito anteriormente. Lo que sucedió es que mientras cambiaba el número en el campo numérico, el valor seleccionado en el menú desplegable no cambió en absoluto. La única forma en que pude cambiar el valor del menú desplegable fue hacer clic en el menú desplegable y cambiarlo manualmente. Solo me gustaría hacer eso DESPUÉS de que el front-end ya haya predeterminado el tamaño de pizza elegido a través de la lógica descrita anteriormente.
Espero que a medida que cambie el valor en el campo numérico, el valor en el menú desplegable cambiará automáticamente según la lógica descrita.
Desea hacer referencia a $scope.pizzaBox.selectedPizzaSize , no a $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>