[英]How to disable a input field according to another select field value in bootstrap/crispy?
[英]Disable Input field according to select option value Angularjs
在一個項目中,我有一個包含硬編碼值和一些輸入字段的下拉菜單。 如果選擇了特定值,則需要禁用某些輸入。 我試過了
這是我的代碼(我只包含了相關代碼)
<html ng-app="abc">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="abcd">
<select ng-model="paperSelection" ng-init="paperSelection='1191'">
<option value="1700">A3 Paper</option>
<option value="1191">A4 Paper</option>
<option value="842">A5 Paper</option>
<option value="377.95">Barcode Sticker 3 in a row</option>
</select>
<p>Number Of Columns Needed : <input type="number" ng-model="numberOfColumns" placeholder="Number Of Columns" ng-disabled="disableInputs"></p>
<p>Enter the number of Stickers : <input type="number" ng-model="numberOfStickersNeeded" placeholder="Number of Stickers"></p>
<p>Enter Height of the Sticker (in px) : <input type="number" ng-model="heightOfSticker" placeholder="Enter Height" ng-disabled="disableInputs"></p>
</body>
</html>
這是我相關的腳本部分。
angular.module('abc', []);
controller('abcd', function ($scope) {
if ($scope.paperSelection == 377.95) {
$scope.disableInputs === true;
}
else
$scope.disableInputs ===false;
}
);
這不起作用。 我無法找出問題所在。
誰能幫我這個忙。
你是disableInputs
不會隨着paperSelection
改變而改變。 您必須將其包裝在某種手表中。
您只需在select
添加ng-change
參數即可更新disableInputs
變量,如下所示:
<select ng-model="paperSelection" ng-init="paperSelection='1191'" ng-change="disableInputs = (paperSelection == 377.95)">
這是一個工作的家伙
在ng change中創建一個函數,並根據條件從該函數中使輸入無效。 這是示例演示
還更改$scope.disableInputs === true;
到$scope.disableInputs = true;
如@maximedubois所提及
angular.module("app",[]) .controller("ctrl",function($scope){ if ($scope.paperSelection == 377.95) { $scope.disableInputs = true; } else $scope.disableInputs =false; $scope.selectChange = function(){ switch($scope.paperSelection){ case '1700' : $scope.disableInputs = true; break; case '1191' : $scope.disableInputs = false; break; default : console.log("no value"); } } })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <select ng-model="paperSelection" ng-init="paperSelection='1191'" ng-change="selectChange()"> <option value="1700">A3 Paper</option> <option value="1191">A4 Paper</option> <option value="842">A5 Paper</option> <option value="377.95">Barcode Sticker 3 in a row</option> </select> <p>Number Of Columns Needed : <input type="number" ng-model="numberOfColumns" placeholder="Number Of Columns" ng-disabled="disableInputs"></p> <p>Enter the number of Stickers : <input type="number" ng-model="numberOfStickersNeeded" placeholder="Number of Stickers"></p> <p>Enter Height of the Sticker (in px) : <input type="number" ng-model="heightOfSticker" placeholder="Enter Height" ng-disabled="disableInputs"></p> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.