Включить/Отключить кнопку по выбранному значению в выпадающем списке с помощью AngularJS

У меня есть одна кнопка, называемая тестовой, и одно раскрывающееся меню с тремя значениями. Как включить-отключить тестовую кнопку в соответствии со значением, выбранным в выпадающем меню. Например. Если выбран режим «Not Ready», кнопка должна отключить Если выбран Ready или Внимание, кнопка должна включитьВключить/Отключить кнопку по выбранному значению в выпадающем списке с помощью AngularJS

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

См Plunker

источник

2015-12-29 ronypatil

А что вы пробовали? В вашем примере нет ни углового приложения, ни контроллера. Просто прямо вверх по HTML. –

извините !! Новый для AngularJs !! – ronypatil

Это нормально, если быть новым. Но вам нужно на самом деле * попробовать * сделать это сначала, а не просто попросить кого-нибудь написать свой код для вас. –

Вам нужно Угловое приложение и контроллер. Оттуда вы можете привязать модель к вашему выбору, а затем использовать выражение с директивой ng-disabled на кнопке, чтобы включить и отключить его динамически в зависимости от значения в поле. См. Ниже. ng-model на select связывает его с $ scope.currentState, что является тем, что я сравниваю с моей литеральной строкой в директиве ng-disabled на кнопке.

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>

источник

2015-12-29 21:37:48 Mic

Спасибо! Код работает отлично – ronypatil

Если значение проверки является число, то использовать этот метод.

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

источник

2016-05-26 08:54:37

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

источник

2017-07-24 09:45:03

Избегайте использования кода – CuriousSuperhero

Включить/Отключить кнопку по выбранному значению в выпадающем списке с помощью AngularJS

ответ

Смежные вопросы