如何在輸入無線電廣播時選擇隱藏div javascript angularjs

-1

我想在選擇單選按鈕時隱藏div。如何在輸入無線電廣播時選擇隱藏div javascript angularjs

<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

來源

2015-04-04 Kingsley Simon

加引導的標籤，因爲金斯利西蒙也沒顧上添加它，但預期應答者一個猜測。 – 2015-04-04 14:32:29

只是增加class="hidden"到HTML元素做什麼都沒有，你需要像

.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 */ 
}

一些CSS陪它取決你的具體目標。

來源

2015-04-04 13:54:49 Siguza

只需在您的主html工作中添加twitter bootstrap.css時添加隱藏。抱歉，但你的答案是100％錯誤的。 – 2015-04-04 13:59:37

@KingsleySimon，我可以問你你在哪裏指定了你正在使用bootstrap.css？我很抱歉，但是你的傲慢和不合理的評論減少了我的動力，幫助你達到0. Upvote支持根據可用信息的準確答案。 – 2015-04-04 14:16:30

@LajosArpad非常感謝您的評論。但它已被添加到我的其他頁面。我不認爲我必須在這裏添加我的整個代碼。好吧，如果它減少了我的動力，那麼也許別人會有動力來幫助我。歡呼聲 – 2015-04-04 14:27:27

添加NG-IF的DIV，並檢查「SERVICE_OPTION」非空
對「產品noselected消息」 DIV，你不需要CSS類來隱藏和顯示DIV在angularJS添加ng-if="!service_option"，利用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>

來源

2015-04-04 14:00:26 BeingDev

我編輯了我的輸入代碼。我不想讓div在初始加載時可見。只有當按鈕被點擊並且沒有選定的單選按鈕時，它纔會變得可見，但是當選擇一個單選按鈕時，它隱藏了div – 2015-04-04 14:22:01

@KingsleySimon快速n髒方式在範圍上添加isFormSubmitted標誌並將ng-if條件更改爲ng- if =「isFormSubmitted &&！service_option」 – BeingDev 2015-04-04 14:55:24

就像BeingDev說，NG-IF/NG-顯示/ NG-獸皮做的角方式..

下面是一個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>

來源

2015-04-04 14:19:54

不會否認BeingDev選項有效，但我不希望div在初始加載時可見。只有當按鈕被點擊時它才能被看見。 – 2015-04-04 14:32:09

觸發器顯示「請選擇一個選項」是一個按鈕，所以它不會在初始加載時顯示。它僅在點擊按鈕時顯示，並且沒有選擇單選按鈕。但是在選擇任何單選按鈕時，如果它隱藏起來，它將隱藏div – 2015-04-04 14:47:04

這裏我們添加一個觀看事件來隱藏可見消息，點擊收音機http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq?p=preview – 2015-04-04 15:00:28

很多路要走這裏，一些更好的根據你完整的代碼，但我會與你的要求是什麼去了，究竟。

這對納克級的工作，如果條件爲真，這將指定一個類名：

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

你需要知道的是，在上述單引號的類名，將如果右邊的條件評估爲真，則將其分配給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="[email protected]" 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>

編輯根據您的最新評論如下，你需要評估兩件事情後指定一個類。所以：

<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

來源

2015-04-04 14:38:49 alou

觸發器以顯示「請選擇一個選項」是一個按鈕，所以它不會在初始加載時顯示。它僅在點擊按鈕時顯示，並且沒有選擇單選按鈕。但是，在選中任何單選按鈕時，如果可見，則隱藏div – 2015-04-04 14:46:38

如何在輸入無線電廣播時選擇隱藏div javascript angularjs

回答

相關問題