Angular ng-click not working

Question

I have the following code:

<div class="row">
    <div ng-repeat="stat in stats"> 
        <div class="col-lg-3 col-md-6 col-sm-6" ng-click="hideShow=(hideShow ? false : true); vm.charts(stat.jobId)">
            <div class="card card-stats">
                <div class="card-header" data-background-color="orange">
                    <i class="material-icons">content_copy</i>
                </div>
                <div class="card-content">
                    <p class="category">{{stat.market}} {{stat.line}} </p>
                    <h3 class="title">{{stat.considered}}
                        <small>Rec</small>
                    </h3>
                </div>
                <div class="card-footer">
                    <div class="stats">
                        <i class="material-icons">date_range</i> {{stat.updated_at}} 
                </div>
            </div>
        </div>
    </div>
</div>
<div ng-if="hideShow">
    test
    <div ng-repeat="chart in charts">
        {{chart}}
        {{chart.data.jobId}}
        {{chart.jobId}} {{chart.line}} {{chart.market}}
    </div>
</div>

The problem is that the div ng-if="hideShow" never displays on the screen. If I place the last piece of code <div ng-if="hideShow"></div> inside the first <div ng-repeat="stat in stats"> then it will display... But I want it to be a complete unrelated div.

How can I have an unrelated div display once the following div is clicked:

<div class="col-lg-3 col-md-6 col-sm-6" ng-click="hideShow=(hideShow ? false : true); vm.charts(stat.jobId)">

Following the controller for this:

// Keep things clean and sane
(function () {
    "use strict";

    angular
        .module('sigmaApp')
        .controller('statisticsController', statisticsController);

    function statisticsController($scope, $state, $location,$document, $mdToast, recordService) {

        // List out our members & methods
        var vm = this;

        //my methods
        vm.closeView = closeView;
        vm.showToast = showToast;
        vm.charts = charts;
        $scope.jobs = [];
        $scope.stats = [];
        $scope.charts = [];
        $scope.hideShow = false;

        recordService.getJobs().then(function(jobs){

            for(var i = 0; i<jobs.data.length; i++){ 
                if(jobs.data[i].type === 'parent')
                    $scope.jobs.push(jobs.data[i]);
            }

            for(var i=0; i<$scope.jobs.length; i++){
                recordService.stats($scope.jobs[i].id).then(function(stats){
                    $scope.stats.push(stats.data[0]);
                });
            }

            console.log($scope.stats);

            for(var i=0; i<$scope.stats.length; i++){
                console.log($scope.stats[i]);
            }

        }).catch(function(err){
            console.log(err);
        });

        function charts(id){
            console.log('build charts for job: '+id);
            var stat;
            for (var i=0; i<$scope.stats.length; i++){
                if ( $scope.stats[i].jobId == id){
                    stat = $scope.stats[i];
                }
            }
            $scope.charts = stat;
        }

        function closeView() {
            $state.go('app.records');
        }

        function showToast(message) {
            $mdToast.show(
                    $mdToast.simple()
                        .content(message)
                        .position('top, right')
                        .hideDelay(5000)
                ); // END toast.show
        } // END showToast

    } // END 

})(); // END iffy

I haven't. But if the div is inside the other one it works.. so I dont think that is the problem... — JoaoFilipeClementeMartins
– JoaoFilipeClementeMartins, Commented Feb 5, 2018 at 19:00
I believe you can simplify (hideShow ? false : true) to !hideShow — Huangism
– Huangism, Commented Feb 5, 2018 at 19:05
I think you should try. When the div is inside your repeat I think "hideShow" is scoping to the variables that you have defined inside your repeater. Outside "hideShow" isn't defined. I will quickly mention defining variables or logic inside your HTML is bad practice and causes hard to debug issues like this. — Mickers
– Mickers, Commented Feb 5, 2018 at 19:06
I don't see how hideShow can be true if you never initialized it. It would be a false value and the div won't show — Huangism
– Huangism, Commented Feb 5, 2018 at 19:08

alexhuang · Accepted Answer · 2018-02-05 19:27:05Z

1

The problem is you are setting your visibility of your div to a primitive type (boolean). Through the magic of prototypal inheritance, the scope value you are modifying via

ng-click="hideShow=(hideShow ? false : true)

is the child scope being created from the ng-repeat directive.

<div ng-repeat="stat in stats">

Therefore the value is being shadowed/hidden and you are not modifying the correct value. You can read more about it here. That is why the div will work hide/show when you move the div within the scope of ng-repeat, but it will not work outside the scope of ng-repeat.

To work around this you can utilize the '.' notation and stick your visibility to an object's property.

So in your controller you initialize a new object literal with the boolean flag.

 $scope.div = {};
 $scope.div.hideShow = false;

And then modify your click event to modify this object

 ng-click="div.hideShow = !div.hideShow"

and then modify your visibility via

<div ng-if="div.hideShow">
    test
    <div ng-repeat="chart in charts">
        {{chart}}
        {{chart.data.jobId}}
        {{chart.jobId}} {{chart.line}} {{chart.market}}
    </div>
</div>

edited Feb 5, 2018 at 19:27

answered Feb 5, 2018 at 19:21

alexhuang

5361 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JoaoFilipeClementeMartins Over a year ago

much appreciated.

Collectives™ on Stack Overflow

Angular ng-click not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related