假設我有兩個輸入：一個數字欄位和一個下拉串列：
<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 時，我期望下拉值從大變為小。
我嘗試了上面列出的代碼。發生的事情是，當我更改數字欄位中的數字時，下拉串列中選擇的值根本沒有改變。我能夠更改下拉串列值的唯一方法是單擊下拉串列并手動更改它。我只想在前端已經通過上面概述的邏輯默認為其選擇的披薩大小之后這樣做。
我期望當我更改數字欄位中的值時，下拉串列中的值將根據所描述的邏輯自動更改。
uj5u.com熱心網友回復：
你想參考$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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454841.html
標籤：javascript html angularjs 前端
上一篇：條件渲染的問題反應