隐藏和显示表单(Angular JS)

时间:2016-03-03 19:39:55

标签: javascript angularjs forms

我的按钮不起作用,在我把一个字符串出现在控制台上的功能中,控制台显示,但我不明白为什么他进入该功能但不改变状态' ISVISIBLE'显示和隐藏...

这里是索引代码:

<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>

控制器:

 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");
    };
});

2 个答案:

答案 0 :(得分:1)

ng-show ="reviewCtrl.IsVisible">代替ng-show ="reviewCtrl.isVisible">

答案 1 :(得分:0)

你注意到控制器中的属性是IsVisible(大写字母I),在视图中是reviewCtrl.isVisible吗?