Что такое способ AngularJS, чтобы показать или скрыть элемент формы?

Этот вопрос задан в списке рассылки Tami Wright...

Я перехожу в мир AngularJS от JQuery, и я не совсем уверен, как перевести конкретный случай использования, который неинтересен в JQuery. Этот случай использования включает/отключает или скрывает/показывает элементы формы на основе изменения выбранного элемента в той же форме. Любые идеи/предложения/указатели, которые кто-то хотел бы поделиться, чтобы помочь мне получить эту работу?

И для идеи того, что я пытаюсь сделать здесь, есть код для иллюстрации:

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

Заранее спасибо,

Тами Райт

ОТВЕТЫ

Ответ 1

Одной из основных целей дизайна AngularJS является предоставление разработчикам приложений возможности создавать веб-приложения с непосредственной или непосредственной манипуляцией с DOM. Во многих случаях это также приводит к гораздо более декларативному стилю программирования. Это позволяет легко анализировать бизнес-логику и значительно увеличивает скорость разработки приложений.

Большинство людей, приходящих из фона 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>

Вы можете видеть, что вместо написания императивного кода мы можем объявить, что класс и атрибуты readonly для ввода привязаны к значению select. Это может быть усилено сложным вычислением значений в контроллере, если вы пожелаете.

Ответ 2

Из официальной документации AngularJS в :

Директивы - это способ научить HTML новым трюкам. Во время компиляции DOM директивы сопоставляются с HTML и выполняются. Это позволяет директивам регистрировать поведение или преобразовывать DOM.

Angular поставляется со встроенным набором директив, которые полезны для создания веб-приложений, но могут быть расширены, так что HTML можно превратить в язык декларативного домена (DSL).

Чтобы включить/отключить ввод, самым простым способом в методе AngularJS является использование следующей директивы ngDisabled. Для отображения/скрытия элементов используйте ngShow и ngHide директивы

У AngularJS есть хорошие примеры для всех этих.