選択項目の値に応じて入力フィールドを無効にするAngularjs

プロジェクトでは、ハードコードされた値といくつかの入力フィールドを持つドロップダウンメニューがあります。特定の値が選択されている場合は、いくつかの入力を無効にする必要があります。私は、これはこれは私の関連するスクリプト部分である私のコード（私は、関連するコードが含まれている）選択項目の値に応じて入力フィールドを無効にする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; 
} 
);

これは機能しません。私はこれで何が問題であるかを知ることができませんでした。

誰でもこれを手伝ってください。

出典

2017-03-15 Thidasa Paranavitharana

で言及として$scope.disableInputs = true;に$scope.disableInputs === true;を変更するサンプルデモです。あなたはそれをある種の時計で包んでいなければなりません。あなたは単に、あなたのselectにこのような何かng-changeパラメータを追加することにより、disableInputs変数を更新することができます

：ここ

<select ng-model="paperSelection" ng-init="paperSelection='1191'" ng-change="disableInputs = (paperSelection == 377.95)">

は作業plunkerは

https://plnkr.co/edit/qTNd7ipZ6EzVisNDNoIq?p=preview

出典

2017-03-15 03:56:00

ありがとう！これは役に立ちます:) –

ng changeで関数を作成し、条件に基づいて入力を無効にするかどうかを指定します。ここで

もあなたがdisableInputsがpaperSelectionの変化とともに変化していないしている@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>

出典

2017-03-15 03:53:05

おかげでたくさんです。これは大いに役立ちます。 –

選択項目の値に応じて入力フィールドを無効にするAngularjs

答えて

関連する問題