Question

I have an html form ( ) , I want that it is displayed when I click on a button. the declaration of the form is the following :

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

and the button is :

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

I use angularjs in my code . Please help me.

Answer 1

Have you looked into the ngShow directive? It ables you to show or hide a DOM element depending on whether the attribute expression resolves to a truthey or falsey value.

Answer 2

Add model change on click

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

And then display the form if model is true

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

Answer 3

在这种情况下，最好使用简单的变量而不是函数。我还建议在设置变量而不是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>

appear an html element by clicking on a button with angularjs

3 个答案: