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

时间:2017-03-15 03:44:27

标签: javascript html angularjs select

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

这是我的代码(我只包含相关代码)

for cmd in arr:
    exec(cmd.split(") ")[-1])

这是我的相关脚本部分。

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

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

任何人都可以帮助我。

2 个答案:

答案 0 :(得分:2)

disableInputspaperSelection的变化并未改变disableInputs。你必须将它包裹在某种手表中。

您只需在ng-change中添加select参数即可更新<select ng-model="paperSelection" ng-init="paperSelection='1191'" ng-change="disableInputs = (paperSelection == 377.95)"> 变量,如下所示:

@Autowired
private NotificationPerformanceLogger notificationPerformanceLogger;

@Bean
public List<NotificationSender> notificationSenders() {
    LOGGER.info("Crating proxy for NotificationSender implementations");

    List<NotificationSender> senders = getAvailableNotificationSenders();
    LOGGER.debug("Found [{}] NotificationSender implementations", CollectionUtils.size(senders));

    return createProxiedNotificationSendersAsSpringWillNotCreateProxyForThese(senders);
}

private List<NotificationSender> getAvailableNotificationSenders() {
    List<NotificationSender> senders = new ArrayList<>();
    try {
        ServiceListFactoryBean serviceListFactoryBean = new ServiceListFactoryBean();
        serviceListFactoryBean.setServiceType(NotificationSender.class);
        serviceListFactoryBean.afterPropertiesSet();

        senders = (List<NotificationSender>) serviceListFactoryBean.getObject();
    } catch (Exception ex) {
        LOGGER.error("Unable to retrieve notification sender implementations", ex);
    }

    return senders;
}

private List<NotificationSender> createProxiedNotificationSendersAsSpringWillNotCreateProxyForThese(List<NotificationSender> notificationSenders) {
    List<NotificationSender> proxyNotificationSenders = new ArrayList<>();
    for (NotificationSender sender : notificationSenders) {
        proxyNotificationSenders.add(createAspectJProxy(sender));
    }

    return proxyNotificationSenders;
}

private NotificationSender createAspectJProxy(NotificationSender notificationSender) {
    AspectJProxyFactory aspectJProxyFactory = new AspectJProxyFactory(notificationSender);
    aspectJProxyFactory.addAspect(notificationPerformanceLogger);

    return aspectJProxyFactory.getProxy();
}

这是一个工作的plunker

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

答案 1 :(得分:1)

在ng更改中创建一个函数,并根据条件创建一个函数使输入禁用或不。这是示例演示

还将$scope.disableInputs === true;更改为$scope.disableInputs = true;,如@maximedubois所述

&#13;
&#13;
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");
  }
}
})
&#13;
<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>
&#13;
&#13;
&#13;