根据选择选项值Angularjs禁用输入字段

Question

在一个项目中，我有一个包含硬编码值和一些输入字段的下拉菜单。 如果选择了特定值，则需要禁用某些输入。 我试过了

这是我的代码（我只包含了相关代码）

<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;
}
);

这不起作用。 我无法找出问题所在。

谁能帮我这个忙。

Answer 1

你是disableInputs不会随着paperSelection改变而改变。 您必须将其包装在某种手表中。

您只需在select添加ng-change参数即可更新disableInputs变量，如下所示：

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

这是一个工作的家伙

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

Answer 2

在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>

根据选择选项值Angularjs禁用输入字段

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-03-15 03:56:00

解决方案2
1 2017-03-15 03:53:05

根据选择选项值Angularjs禁用输入字段

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-03-15 03:56:00

解决方案2 1 2017-03-15 03:53:05

解决方案1
2 已采纳 2017-03-15 03:56:00

解决方案2
1 2017-03-15 03:53:05