Действие после установки 3 флажков

У меня есть 3 флажка:

<div class = "conditions" data-ng-controller = "SignUpController as vm">
  <div class = "conditions-content">
    Lorem Ipsum ...
  </div>
  <ul>
    <li><input type = "checkbox" name = "condition1"></li>
    <li><input type = "checkbox" name = "condition2"></li>
    <li><input type = "checkbox" name = "condition3"></li>
  </ul>
</div>

И контроллер Angular 1:

function SignUpController() {

  var vm = this;

  vm.start = function () {      

  }    

}

Когда все 3 флажка установлены, мне нужно:
1. Скройте div с классом conditions;
. 2. Вызовите функцию start() на контроллере.

Это должно быть, чтобы все условия были истинными.

Как я могу это сделать?

Спасибо

Что ты пробовал? Что-то вроде приписывания ng-model флажкам и проверки их значения? (Не обижайтесь, но удивитесь, что пользователь с таким представителем задает такой вопрос ..)

— 16.04.2018 16:44

javascript angularjs

16.04.2018 16:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте обработчик ng-change на всех 3 входах, которые будут проверять их значения (которые установлены через ng-model):

<div class = "conditions" ng-class = "{hidden: vm.hidden}" data-ng-controller = "SignUpController as vm">
  <div class = "conditions-content">
    Lorem Ipsum ...
  </div>
  <ul>
    <li><input type = "checkbox" ng-model = "vm.cond1" ng-change = "vm.check()" name = "condition1"></li>
    <li><input type = "checkbox" ng-model = "vm.cond2" ng-change = "vm.check()" name = "condition2"></li>
    <li><input type = "checkbox" ng-model = "vm.cond3" ng-change = "vm.check()" name = "condition3"></li>
  </ul>
</div>

И в контроллере:

function SignUpController() {
  var vm = this;

  vm.hidden = false;

  vm.start = function () {

  };

  vm.check = function () {
    if (vm.cond1 && vm.cond2 && vm.cond3) {
      vm.hidden = true;
      vm.start();    
    }
  }
}

Вы также можете использовать ng-show / ng-hide / ng-if, чтобы условно скрыть контейнер <div>.

да, зависит от того, чего вы хотите достичь, добавлю пометку о них в ответ

— 16.04.2018 18:22

16.04.2018 16:46