Jaki jest sposób AngularJS, aby pokazać lub ukryć element formularza?

To pytanie został poproszony na liście mailingowej przez Tami Wright ...Jaki jest sposób AngularJS, aby pokazać lub ukryć element formularza?

ruszam w świat angularjs z JQuery i nie jestem pewien, jak tłumaczyć konkretnego przypadku użycia, który jest nie do pomyślenia w jQuery. Ten przypadek użycia umożliwia włączanie/wyłączanie lub ukrywanie/pokazywanie elementów formularza na podstawie zmiany elementu select w tym samym formularzu. Wszelkie pomysły/sugestie/wskazówki, które ktoś chciałby udostępnić, aby mi pomógł to zadziałać?

A dla idei, co usiłuję zrobić tutaj jest jakiś kod do zilustrowania:

$('#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; 
      });

Dziękuję z góry,

Tami Wright

Źródło

2012-11-08 Pete BD

Jednym z głównych projektu Celem AngularJS jest umożliwienie programistom aplikacji tworzenia aplikacji internetowych z niewielką lub żadną bezpośrednią manipulacją DOM. W wielu przypadkach prowadzi to do znacznie bardziej deklaratywnego stylu programowania. Pozwala to na łatwe testowanie logiki biznesowej i znacznie zwiększa szybkość, z jaką można tworzyć aplikacje.

Większość osób pochodzących z tła jQuery ma problem z oparciem swojego rozwoju wokół manipulacji DOM, a w szczególności z wykorzystaniem DOM jako modelu domeny ich aplikacji.

AngularJS rzeczywiście bardzo ułatwia zmianę wyglądu elementów wejściowych na podstawie zdarzeń użytkownika lub zmian danych. Oto jeden przykład tego, jak można rozwiązać powyższy problem.

Oto demo robocze: 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>

Widać, że zamiast pisać kod imperatyw, jesteśmy w stanie zadeklarować, że klasa i readonly atrybuty wejścia są zobowiązane do wartości z Wybierz. Można to poprawić za pomocą złożonych obliczeń wartości w sterowniku, jeśli chcesz.

Źródło

2012-11-08 11:24:55

+1. Doceń twoje wysiłki, aby odpowiedzieć na pytanie na SO. – SunnyShah

Proponuję również użycie ng-hide lub ng-show jako stanu w kanciastej dokumentacji https://docs.angularjs.org/api/ng/directive/ngHide – Skary

Podoba mi się twój przykład i wyjaśnienie. Czy nie sądzisz, że znowu wracamy do nowoczesnego "natrętnego javascriptu"? –

Od angularjs oficjalnej dokumentacji na directives:

Dyrektywy są sposobem, aby nauczyć się nowych sztuczek HTML. Podczas kompilacji DOM dyrektywy są porównywane z HTML i wykonywane. Pozwala to dyrektywom rejestrować zachowanie lub przekształcać DOM.

Angular jest dostarczany z wbudowanym zestawem dyrektyw, które są przydatne do tworzenia aplikacji internetowych, ale można go rozszerzyć w taki sposób, że HTML może zostać przekształcony w deklaratywny język (DSL).

Aby włączyć/wyłączyć wejście, najprostszym sposobem na angularjs sposobem jest użycie następującą dyrektywę ngDisabled. Aby pokazać/ukryć elementy, użyj następujących ngShow i AngularJS ma ładne przykłady dla wszystkich tych.

Źródło

2013-01-13 21:37:28 Guy

Jaki jest sposób AngularJS, aby pokazać lub ukryć element formularza?

Odpowiedz

Powiązane problemy