Question

我想在选择单选按钮时隐藏div。

    <div class="col-md-3">
     <input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
     <input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
     <div class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
    </div>
<div class="col-md-3">
 <button class="btn btn-default" ng-click="getReservationDetails('lg', packageSlot)"> Book Now </button>    
</div>

在我的代码中，如果选择了一个单选按钮，我希望隐藏div class = product-noselected-message。

这是我目前在javascript上的内容

$scope.getReservationDetails = function(size, packageSlot) {
      var service_option;
      if($('input[name=service_option]:checked')) {

        service_option = $('input[name=service_option]:checked').val();
      }

      if (service_option!= null) {
        $rootScope.date = new Date();
        console.log($rootScope.date);
        $rootScope.singlePackageSlot = packageSlot;
        $rootScope.locationName = $scope.cleaningServiceLocation.name;

        modalInstance = $modal.open({
          templateUrl: 'views/cleaning_services/register_event.html',
          controller: 'CleaningServicesCancelCtrl',
          size: size
        });
      }
      else {
        $('.product-noselected-message').html('Please select an option');
      }
    $('#service_option').on('checked', function() {
          $('.product-noselected-message').addClass('hidden');
        });

但它不起作用我该怎么办？

http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq

Answer 1

只是将class="hidden"添加到HTML元素中什么都不做，你需要附带一些CSS，如

.hidden
{
    display: none; /* This will act like the element doesn't exist */
}

或

.hidden
{
    visibility: hidden; /* The element will be 100% transparent, but still take up space */
}

取决于您的确切目标。

Answer 2

在div上添加NG-IF，并检查＆＃34; service_option＆＃34;不是在产品选择消息＆＃39;上添加ng-if="!service_option" div，你不需要css类来隐藏和显示angularJS中的div，使用NG-IF或NG-SHOW或NG-HIDE

<div class="col-md-3">
 <input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
 <input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
<div ng-if="!service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
</div>

Answer 3

就像BeingDev说的那样，ng-if / ng-show / ng-hide是一种有条理的做法..

下面是一个plunker链接，您可以在其中检查输出

http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq?p=preview

 <div ng-hide="service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

Answer 4

有很多方法可以去这里，有些方法更好，具体取决于你的完整代码，但我会完全按照你的要求去做。

这是ng-class的工作，如果条件被评估为true，它将分配一个类名：

  <div ng-class="{'hidden' : service_option != '' && other_option }" ...

您需要知道的是，如果右侧的条件评估为true，则上面单引号中的类名将被分配给div（或任何元素）。在这种情况下，在无线电中选择的值将使service_option成为空字符串。可能是你可能需要的任何东西，当然。

var app = angular.module("myapp", []);
app.controller("mycontroller", function($scope) {
  $scope.service_option = "";

})

.hidden {display:none;}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp">
    <div class="col-md-3" ng-controller="mycontroller">
      <input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option" />
Adhoc
          <br />
      <input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option" />
Weekly
      <div ng-class="{'hidden' : service_option != '' }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

  <p>Value Selected : {{service_option}}</p>
  </div>
  </body>

</html>

EDIT 根据您下面的最新评论，您需要在评估两件事后分配课程。所以：

  <div ng-class="{'hidden' : service_option != '' || other_option }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

这样做会。这是一个plunker链接，所以它不会与上面的代码混淆：

http://plnkr.co/edit/pYpKwagYmYTxURM1aJft?p=preview

当输入无线电广播选择javascript angularjs时如何隐藏div

4 个答案: