AngularJS Checkbox aktiviert ermöglicht Eingabefeld

Ich bin irgendwie neu in AngularJS und meine Frage ist:AngularJS Checkbox aktiviert ermöglicht Eingabefeld

ich eine Schleife wie diese:

<body ng-app="ngToggle"> 
    <div ng-controller="AppCtrl"> 
     <input type="checkbox" ng-repeat="btn in btns" class="here" value="{{btn.value}}"> 

     <input type="text" class="uncheck" disabled> 
    </div> 
</body>

Einer dieser Kontrollkästchen hat einen Wert von „OTHER“ und was muss ich tun, ist: wenn das Kontrollkästchen mit der „anderen“ Wert überprüft wird das disabled-Attribut aus dem <input type="text" class="uncheck" disabled>

entfernen Dies ist mein Controller:

angular.module('ngToggle', []) 
    .controller('AppCtrl',['$scope', function($scope){ 
     $scope.btns = [ 
     {value:'one'}, 
     {value:'two'}, 
     {value:'other'} 
     ]; 
}]);

Hoffe jemand kann mir helfen, Danke.

Quelle

2016-06-06 Ruben R.

Sie verwenden sollen 'radio' buttons Ich denke .. – Rayon

kann ich nicht, weil mehr als eine Option @Rayon –

ausgewählt werden kann, zu ihrer Information des„ng“Präfix für Steuerungen ist konventionell Wird von Sachen verwendet, die standardmäßig von angularjs bereitgestellt werden. Am besten, es nicht in benutzerdefinierten Komponenten zu verwenden. – jrharshath

Verwendung ng-change Richtlinie und Testwert von other Checkbox in forEach-loop

angular.module('ngToggle', []) 
 
    .controller('AppCtrl', ['$scope', 
 
    function($scope) { 
 
     $scope.disabled = true; 
 
     $scope.btns = [{ 
 
     value: 'one' 
 
     }, { 
 
     value: 'two' 
 
     }, { 
 
     value: 'other' 
 
     }]; 
 
     $scope.onChange = function() { 
 
     $scope.btns.forEach(function(btn) { 
 
      if (btn.value === 'other' && btn.status === true) { 
 
      $scope.disabled = false; 
 
      } else { 
 
      $scope.disabled = true; 
 
      } 
 
     }); 
 
     } 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="ngToggle"> 
 
    <div ng-controller="AppCtrl"> 
 
    <input type="checkbox" ng-repeat="btn in btns" class="here" ng-model='btn.status' ng-change='onChange()'> 
 

 
    <input type="text" class="uncheck" ng-disabled='disabled'> 
 
    </div> 
 
</body>

Quelle

2016-06-06 04:57:03 Rayon

Hallo @rayon danke für die Antwort, diese Arbeit großartig, basierend auf Ihrer Antwort ich es schaffen, es funktioniert, aber jetzt sagen wir haben mehrere Kontrollkästchen Schleifen gefolgt von einem Eingabefeld, und jedes Mal, wenn das "andere" -Kontrollkästchen aktiviert ist wird das folgende Eingabefeld aktivieren, überprüfen Sie bitte meine nächste Frage [link] (http://stackoverflow.com/questions/37659974/angularjs-scope-with-parameter), Danke. –

Nutzen Sie ng-Modelle. Bitte vermeiden Sie auch in AngularJS das Attribut "Werte". Die Alternative für Werte ist "ng-init". Naja, jedenfalls hier ist ein Arbeitscode:

<!DOCTYPE html> 
<html > 

    <head> 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    </head> 

    <body ng-app="ngToggle"> 
    <div ng-controller="AppCtrl"> 
     <p ng-repeat="btn in btns"> 
      <input type="checkbox" ng-model="btn.bool" value="ss" class="here" > {{ btn.value }} 
     </p> 
     <input type="text" ng-model="textModel" class="uncheck" ng-disabled="other.bool"> 
     <p>{{ other.bool }} -- {{textModel }}</p> 
    </div> 
    <script type="text/javascript"> 
     angular.module('ngToggle', []) 
      .controller('AppCtrl',['$scope', function($scope){ 
       $scope.btns = [ 
       {value:'one', bool:false}, 
       {value:'two', bool:true}, 
       {value:'other', bool:true} 
       ]; 
       $scope.otherBool = $scope.btns[2]['bool']; 
       $scope.btns.map(function(obj){ 
        //alert(JSON.stringify(obj)) 
        if((obj.value) == 'other'){ 
        $scope.other = obj; 
        } 
       }); 
     }]); 
    </script> 
    </body> 
</html>

Sie können es in Plunker überprüfen auch: http://plnkr.co/edit/GODfWbhlWvzjLKHFcEYs?p=preview

Quelle

2016-06-06 04:57:35

wie dies versuchen.

angular.module('ngToggle', []) 
 
    .controller('AppCtrl',['$scope', function($scope){ 
 
     $scope.btns = [ 
 
     {value:'one',name:"one"}, 
 
     {value:'two',name:'two'}, 
 
     {value:'other',name:'other'} 
 
     ]; 
 
     
 
     $scope.disable=true; 
 
     
 
     $scope.check = function(value){ 
 
     if(value == "'other'") 
 
      $scope.disable = false; 
 
     else 
 
      $scope.disable=true; 
 
     } 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ngToggle"> 
 
    <div ng-controller="AppCtrl"> 
 
     <div ng-repeat="btn in btns"> 
 
     <input type="checkbox" ng-model="btn.value" ng-true-value="'{{btn.value}}'" ng-change="check(btn.value)" >{{btn.name}} 
 
     </div> 
 
     <input type="text" class="uncheck" ng-disabled='disable'> 
 
    </div> 
 
</div>

Quelle

2016-06-06 05:05:46

AngularJS Checkbox aktiviert ermöglicht Eingabefeld

Antwort

Verwandte Themen