Все или один флажок установлен, чтобы включить кнопку отправки angularjs - PullRequest
Новая
       0

Все или один флажок установлен, чтобы включить кнопку отправки angularjs

0 голосов
/ 30 января 2019

Я новичок в angularjs.Я пытаюсь простую программу, которая имеет флажки и отключенную кнопку.Кнопка должна быть включена после установки одного или нескольких флажков.Однако мое решение, похоже, не работает.Любая помощь в этом отношении будет отличной.HTML код: 

   <html ng-app="Apps" ng-controller = "chk">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="Apps.js"></script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div >

<label ng-repeat="lbl in lbls">
  <input type="checkbox" ng-model="chkd" > {{lbl}}
</label>
<br>
<input type="button" value="Submit" ng-disabled="!chkd"/>
</div>
</center>
</body>
</html>

вот файл JS: 

    var Apps = angular.module ('Apps', [])
Apps.controller("chk", function($scope){

$scope.lbls = [
    'Apples', 
    'Bananas', 
    'Apricots', 
    'Peaches'
  ];

});

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Вот подход, который вы можете вставить другие фрукты, и вам не нужно менять код в вашем ng-disabled: 

 var Apps = angular.module ('Apps', [])
Apps.controller("chk", function($scope){
$scope.chkd = {
                Apples: false, 
                Bananas: false,
                Apricots: false,
                Peaches: false
                };

$scope.enableSubmit = function(){
  var atLeastOneSelected = [];
  
  for (var fruit in $scope.chkd) {
      if($scope.chkd[fruit] === true){
        atLeastOneSelected.push(fruit);
      }
  }
  
  return !(atLeastOneSelected.length > 0);
}

});
<html ng-app="Apps" ng-controller = "chk">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="Apps.js"></script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div >

<label ng-repeat="(lbl, enabled) in chkd">
  <input type="checkbox" ng-model="chkd[lbl]"> {{lbl}}
</label>
<br>
<input type="button" value="Submit" ng-disabled="enableSubmit()"/>
</div>
</center>
</body>
</html>
0 голосов
/ 30 января 2019

Похоже, вы должны иметь отдельные условия для каждого из флажков для ng-disabled, чтобы обнаружить изменение.Вместо этого используйте HTML-макет: 

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> 
        </script>
    </head>
    <body>
        <center>
        <h1> Fruits </h1>
        <hr/>
        <div ng-app>
            <input type="checkbox" ng-model="cb01"> Apples
            <input type="checkbox" ng-model="cb02"> Bananas
            <input type="checkbox" ng-model="cb03"> Apricots
            <input type="checkbox" ng-model="cb04"> Peaches
            <br>
            <input type="button" value="Submit" ng-disabled="!(cb01||cb02||cb03||cb04)">
        </div>
        </center>
    </body>
</html>

jsfiddle

EDIT Код теперь должен работать нормально.Извините за путаницу!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...