CODEWITHSUNDEEP
javascripthtmlangularjs
Martin Locqueville
Martin Locqueville

Reputation: 81

Html & Angular : why doesn't my variable update?

I've got some global variables in my html code responsible for showing and / or hiding a new table entry field and an edit table entry field. For some reasons, each time I try to show or hide one of those fields using the buttons in my table, it doesn't work.

Here's my code:

<!--Page HTML du module News du dashboard.-->
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
        <meta charset="UTF-8">
    </head>
    <body ng-app="myApp">
        <div class="container" ng-controller="AppCtrl">
            <br>
            <button type="button" class="btn btn-default pull-right" ng-click="add = !add; updt = false"/>
                Ajouter une annonce
                <span class="glyphicon glyphicon-new-window"></span>
            </button>
            <br>
            <br>
            <table class="table table-striped table-responsive table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th class="col-md-1 text-center">
                            <span class="glyphicon glyphicon-pushpin"></span>
                        </th>
                        <th class="col-md-7">News</th>
                        <th class="col-md-1">Auteur</th>
                        <th class="col-md-1">Date</th>
                        <th class="col-md-2">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in queryResult">
                        <td class="text-center">
                            <b> {{x.pinned}} </b>
                        </td>
                        <td>
                            <b>{{x.title}}</b>
                            <button type="button" class="btn btn-default pull-right" ng-click="body = !body">
                                <span class="fa fa-chevron-up" ng-show="body"></span>
                                <span class="fa fa-chevron-down" ng-hide="body"></span>
                            </button>
                            <div class="check-element animate-hide" ng-show="body">
                                <p>{{x.body}}</p>
                            </div>
                        </td>
                        <td>
                            {{x.author}}
                        </td>
                        <td>
                            {{x.date}}
                        </td>
                        <td>
                            <div class="text-center">
                                <button type="button" class="btn btn-default" ng-click="pinUnpin(x.id,x.pinned)">
                                    <span class="glyphicon glyphicon-pushpin"></span>
                                </button>
                                <button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
                                    <span class="glyphicon glyphicon-edit"></span>
                                </button>
                                <button type="button" class="btn btn-default" ng-click="delEntry(x.id, x.title)">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div ng-show="add">
                <div class="page-header">
                    <h3>Nouvelle news</h3>
                </div>
                <input  type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
                <br>
                <input  type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
                <div class="checkbox">
                    <label><input type="checkbox" value="" ng-model="newPinned"/>Epingler la news?</label>
                </div>
                <div class="pull-right">
                    <button type="button" class="btn btn-default" ng-click="add = !add">
                        Annuler
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    <button type="button" class="btn btn-default" ng-click="newEntry()">
                        Envoyer
                        <span class="fa fa-check"></span>
                    </button>
                </div>
            </div>
            <div ng-show="updt">
                <div class="page-header">
                    <h3>Editer une news</h3>
                </div>
                <input  type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
                <br>
                <input  type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
                <div class="pull-right">
                    <button type="button" class="btn btn-default" ng-click="updt = !updt">
                        Annuler
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    <button type="button" class="btn btn-default" ng-click="updtEntry(); updt = !updt">
                        Envoyer
                        <span class="fa fa-check"></span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Scripts -->       
        <script src="./bower_components/angular/angular.js"></script>
        <script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
        <script src="./controller.js"></script>
    </body>
</html>

For instance, when I click on the first button (Ajouter une annonce), my "add" and "updt" div fields are shown or hidden accordingly. Same when I use the cancel button in those divs. But the button each table row:

<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
    <span class="glyphicon glyphicon-edit"></span>
</button>

doesn't seem to update my "add" and "updt" variables. And I know that my function prepareUpdt is called, so I know that ng-click is reached.

Where's the problem ?

Upvotes: 1

Views: 104

Answers (2)

Brian
Brian

Reputation: 5049

This is due to a scoping issue with ng-repeat. More information is here.

Basically, add and updt do not exist in the outer scope (outside of the ng-repeat scope), and therefore their values never change when you click the button in the table.

To resolve, I suggest that you change each definition (line ~11, 55) of 

ng-click="add = !add; updt = false"

to

ng-click="viewObj.add = !viewObj.add; viewObj.updt = false"

And

<div ng-show="add">

to

<div ng-show="viewObj.add">

..and..

<div ng-show="updt">

to

<div ng-show="viewObj.updt">

Also,

~77 to:

<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">

and

~95 to:

<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">

You also have a line around ~36 ng-click="body = !body". Since you are using that within the ng-repeat scope, you should be fine, however, bear in mind that will not be available outside of ng-repeat.

Upvotes: 1

Tom Shen
Tom Shen

Reputation: 1045

You shouldn't put this logic in your view. You should declare the variables in your controller and change them in your controller inside the function prepareUpdt(). This way angular will double bind these variables and update your view upon changes.

vm.updt = true;
vm.add = true;

function prepareUpdt() {
    // your other code
    vm.updt = !vm.updt;
    vm.add = false;
}

and in your html:

<div ng-show="vm.add">
...
<div ng-show="vm.updt">

Upvotes: 0

Related Questions