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

Question

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 ?

Brian · Accepted Answer · 2016-06-07 09:30:11Z

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.

Tom Shen · Accepted Answer · 2016-06-07 09:23:43Z

0

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

answered Jun 7, 2016 at 9:23

Tom Shen

1,0453 gold badges11 silver badges29 bronze badges

5 Comments

Martin Locqueville Over a year ago

Why shouldn't I ? Is that a code convention, are there optimisation issues, or is what I want to do just not possible?

Tom Shen Over a year ago

It's better to put view-logic in controller. It's convention for the MVC software pattern. I'm not saying it's impossible to do it in html, but why use angular if you don't use the awesome 2way binding it offers?

Martin Locqueville Over a year ago

I do use it elsewhere, but I'm pretty new to this, so I figured that I didn't need to use data binding if I didn't have any use for the variable in the controller.

Martin Locqueville Over a year ago

And by the way, I had to do what you said and create an updt variable in my controller, otherwise id wouldn't work. But I used $scope.updt, instead of vm.updt.

Tom Shen Over a year ago

yes, using $scope will work, its the same thing :) glad I could help

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related