什麼是AngularJS顯示或隱藏表單元素的方式？

在Tami Wright的郵件列表上詢問此問題...什麼是AngularJS顯示或隱藏表單元素的方式？

我正在從JQuery進入AngularJS世界，我不太清楚如何翻譯一個特殊的用例，這在JQuery中是沒有什麼大不了的。該用例是基於同一表單中select元素的變化啓用/禁用或隱藏/顯示錶單元素。任何人願意分享的想法/建議/指針可以幫助我做到這一點？

而對於什麼，我想在這裏做一個想法是一些代碼來說明：

$('#ddl').change(function (e) { 
       var selectedValue = $(this).val(); 
       switch(selectedValue){ 
        case 1: 
         // Hide/show or enable/disable form elements here with Javascript or Jquery 

// Sample enable code 
      document.getElementById("username").readOnly = false; 
      document.getElementById("username").style.background = "transparent"; 
      document.getElementById("username").style.color = "#000000"; 


// Sample disable code 
      document.getElementById("first_name").readOnly = true; 
      document.getElementById("first_name").style.color = "#c0c0c0"; 
            break;   
       } 
       return false; 
      });

謝謝你在前進，

塔米·賴特

來源

2012-11-08 Pete BD

一個主要的設計AngularJS的目標是允許應用程序開發人員通過很少或不直接操作DOM來構建Web應用程序。在很多情況下，這也會導致更多的聲明式編程風格。這使得業務邏輯可以很容易地進行單元測試，並大大提高了開發應用程序的速度。

大多數來自jQuery背景的人都很難擺脫基於DOM操作的開發，特別是使用DOM作爲其應用程序的領域模型。

AngularJS實際上使得如果根據用戶事件或數據更改很容易改變輸入元素的外觀。這是上述問題如何實現的一個例子。

這裏的工作演示：http://plnkr.co/edit/zmMcan?p=preview

<html ng-app> 
<head> 
    ... 
    <style type="text/css"> 
    .disabled { 
     color: #c0c0c0; 
     background: transparent; 
    } 
    </style> 
</head> 
<body ng-init="isEnabled=true"> 

    <select ng-model="isEnabled" ng-options="choice == 'Enabled' as choice for choice in ['Enabled', 'Disabled']"></select><br> 

    User Name: <input ng-model="userName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"><br> 
    First Name: <input ng-model="firstName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"> 
</body>

你可以看到，而不是編寫必要的代碼，我們可以聲明類和輸入的只讀屬性綁定到的值選擇。如果您願意，可以通過對控制器中的值進行復雜的計算來增強此功能。

來源

2012-11-08 11:24:55

+1。感謝您回答SO問題的努力。 – SunnyShah

我還建議在角度記錄中使用ng-hide或ng-show作爲狀態 https://docs.angularjs.org/api/ng/directive/ng隱藏 – Skary

我喜歡你的例子和解釋。你不覺得我們又回到了一種現代的「突兀的javascript」嗎？ –

從AngularJS官方文檔上directives：

指令是教HTML新花樣的方式。在DOM編譯期間，指令會與HTML進行匹配並執行。這允許指令註冊行爲或轉換DOM。

Angular帶有一組內置的指令，這些指令可用於構建Web應用程序，但可以擴展爲使HTML可以變爲聲明性域特定語言（DSL）。

爲了啓用/禁用輸入，AngularJS最簡單的方法是使用以下ngDisabled指令。對於顯示/隱藏元素，請使用以下ngShow和ngHide指令

AngularJS對所有這些都有很好的示例。

來源

2013-01-13 21:37:28 Guy

什麼是AngularJS顯示或隱藏表單元素的方式？

回答

相關問題