简体   繁体   中英

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="your@email.com"/>
        <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");
    };
});

ng-show ="reviewCtrl.IsVisible">而不是ng-show ="reviewCtrl.isVisible">

您是否注意到控制器中的属性为IsVisible(大写I),并且视图中的属性为reviewCtrl.isVisible?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM