CODEWITHSUNDEEP
javascriptangularjsforms
Acauã Pitta
Acauã Pitta

Reputation: 760

Hide and Show Form (Angular JS)

My button isn't working, in the function I put a string to appears on console, the console shows, but what I dont understand is why he enter on the function but don't change the state of 'isVisible' to show and hide...

Here's the code of index:

<div ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)">
    <button class="btn-warning" ng-click="reviewCtrl.ShowHide()">Deixe uma review!</button>
    <form name ="reviewForm" ng-show ="reviewCtrl.isVisible">

        <h2 style="color: black; font: status-bar; font-size: large">Sua Review: </h2>
        <p>

        <blockquote style="margin-bottom: 0%; padding-bottom: 0%">

            <b><span class="glyphicon glyphicon-star">{{reviewCtrl.review.stars}}</span></b>
            <b>{{reviewCtrl.review.author}}</b>
            <p>
            <p> 
                <cite>{{reviewCtrl.review.body}}</cite><p>
            <hr>
        </blockquote>
        <p>
        <h4 style="color: black; font: status-bar; font-size: x-large">Adicionar uma Review: </h4>

        <p>
            <select ng-model="reviewCtrl.review.stars">
                <option value="1">1 Star</option>
                <option value="2">2 Stars</option>
                <option value="3">3 Stars</option>
                <option value="4">4 Stars</option>
                <option value="5">5 Stars</option>
            </select>
        <p>
            <textarea ng-model="reviewCtrl.review.body" placeholder="Digite sua review aqui..." style="width: 75%; height: 25%; resize: none"></textarea>
        <p>
            <input ng-model="reviewCtrl.review.author" type="email" placeholder="[email protected]"/>
        <p>
            <button class="btn-toolbar" type="submit" value="Submit">Submit</button>
    </form>
</div>

Controller:

 app.controller("ReviewController", function () {
    this.review = {};
    this.addReview = function (product) {
        product.reviews.push(this.review);
        this.review = {};
    };

    this.IsVisible = true;

    this.ShowHide = function () {
        //If DIV is visible it will be hidden and vice versa.
        this.IsVisible = !this.IsVisible;
        console.log("foi");
    };
});

Upvotes: 0

Views: 569

Answers (2)

JulioCT
JulioCT

Reputation: 1117

have you noticed the property in the controller is IsVisible (capital I) and in the view is reviewCtrl.isVisible ?

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 3765

ng-show ="reviewCtrl.IsVisible"> instead of ng-show ="reviewCtrl.isVisible">

Upvotes: 1

Related Questions