появляется элемент html, нажимая на кнопку с angularjs

Question

У меня есть html-форму(), я хочу, чтобы она отображалась, когда я нажимаю кнопку. декларация формы заключается в следующем:

<div id = "formulaire" class="gl" > 

и кнопка:

<a href="#" ng-click="edit(u)">Edit</a> 

Я использую angularjs в моем коде. Пожалуйста, помогите мне.

Answer 1

Это лучше использовать простую переменную, чем функции в этом случае. Я бы также рекомендовал использовать controller scope при настройке переменных вместо application scope, поэтому вы не сталкиваетесь с проблемами с переменными, когда ваше приложение становится большим.

Я также выбрал data-ng-click над ng-click, потому что это позволит html правильно проверить (что можно проверить с помощью W3's validator).

Попробуйте это ...

"use strict"; 
 
angular.module('myApp', []) 
 
.controller("myController", function() { 
 
    this.edit = false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 

 
<div data-ng-app="myApp" data-ng-controller="myController as ctrl"> 
 
    <a href="#" data-ng-click="ctrl.edit = !ctrl.edit">Edit</a> 
 

 
    <div id="formulaire" class="gl" data-ng-show="ctrl.edit"> 
 
     <form> 
 
      <fieldset> 
 
       <label>Field:</label> 
 
       <input type="text" /> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
</div>

Answer 2

Вы заглянули в ngShow directive? Это позволяет вам отображать или скрывать элемент DOM в зависимости от того, разрешает ли выражение атрибута значение truthey или falsey. изменение модели

Answer 3

Добавить по щелчку

<a href="#" ng-click="show = true">Edit</a> 

А затем отобразить форму, если модель верна

<div id = "formulaire" class="gl" ng-if="show">