Aktivieren / Deaktivieren Sie die Schaltfläche nach ausgewähltem Wert in der Dropdown-Liste mit AngularJS

Question

Ich habe eine Schaltfläche namens Test und ein Dropdown-Menü mit drei Werten. Aktivieren und Deaktivieren der Testschaltfläche gemäß dem im Dropdown-Menü ausgewählten Wert. Z.B. Wenn "Nicht bereit" ausgewählt ist, sollte die Schaltfläche deaktiviert sein. Wenn "Bereit" oder "Achtung" ausgewählt ist, sollte die Schaltfläche aktiviert sein

<div class="row">
    <div>
    <button id="testBtn" class="btn btn-default" >Test</button>
    </div>
</div>


<div class="row">
<div class="col-md-12">


    <select name="select">
        <option value="value1" selected>Not ready</option> 
        <option value="value2">Ready</option>
        <option value="value3">Attention !!</option>
    </select>


 </div>
</div>

Siehe Plunker

html angularjs angularjs-directive angularjs-scope ng-controller

0

ronypatil 30 Dez. 2015 im 00:00

Answer 1

Sie benötigen eine Angular App und einen Controller. Von dort aus können Sie ein Modell an Ihre Auswahl binden und dann einen Ausdruck mit der Anweisung ng-disabled auf der Schaltfläche verwenden, um es abhängig vom Wert im Feld dynamisch zu aktivieren und zu deaktivieren. Siehe unten. ng-model in der Auswahl bindet es an $ scope.currentState, mit dem ich meine Literalzeichenfolge in der Anweisung ng-disabled auf der Schaltfläche vergleiche.

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.states = ['Not ready', 'Ready', 'Attention !!'];
  $scope.currentState = 'Not ready';
});

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="row">
    <div>
      <button id="testBtn" class="btn btn-default" ng-disabled="currentState === 'Not ready'">Test</button>
    </div>
  </div>


  <div class="row">
    <div class="col-md-12">


      <select name="select" ng-model="currentState" ng-options="state as state for state in states">
      </select>


    </div>
  </div>
</body>

</html>

5

Mic 29 Dez. 2015 im 21:53

Answer 2

Wenn der Validierungswert number ist, verwenden Sie diese Methode.

            <div class="form-group">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <label class="control-label  col-xs-4 col-sm-4 col-md-4 col-lg-4">User Type</label>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                <select class="form-control height_30" ng-model="data1.user_type " ng-options="cust.id as cust.typename for cust in usertype"></select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <label class="control-label  col-xs-4 col-sm-4 col-md-4 col-lg-4">Password</label>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                <input type="text" class="form-control" ng-model="data1.user_passwd">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <label class="control-label  col-xs-4 col-sm-4 col-md-4 col-lg-4">Customer</label>
                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                <select ng-disabled="data1.user_type === 1 || data1.user_type === 2" class="form-control height_30" ng-model="data1.customer_id" ng-options="cust.customer_id as cust.customer_name for cust in customers"></select>
                            </div>
                        </div>
                    </div>
                </div>

1

KARTHIKEYAN.A 26 Mai 2016 im 08:54

Answer 3

<select ng-model="item" ng-options="a.name for a in data">
    <option value="">
        select
    </option></select>
<button class="btnS btn-success ctrl-btn" ng-click="save()" ng-disabled="!item"> Submit</button>

0

Vipin Yadav 24 Juli 2017 im 09:45

Aktivieren / Deaktivieren Sie die Schaltfläche nach ausgewähltem Wert in der Dropdown-Liste mit AngularJS

3 Antworten

Verwandte Fragen

Neue Fragen

html