CODEWITHSUNDEEP
javascriptjqueryangularjs
blue-sky
blue-sky

Reputation: 53826

View not changing with click

In this fiddle :

http://jsfiddle.net/9fR23/187/

The table elements are not been hidden when I hit div element "Flip!". The elements should become hidden as I'm changing the state of the structure which is determined by ng-show

The map is being updated but does not seem to be applied ?

I tried adding $scope.$apply to block when flip is invoked but same result. How to update the state of ng-show when the underlying map data structure changes ?

fiddle code : 

<div ng-app="myapp" ng-controller="FirstCtrl">
    <table class="table table-striped">
        <tr ng-repeat="person in people">
            <td ng-show="errorMap([1])">{{ person.first + ' ' + person.last }}</td>
        </tr>
    </table>

    <div ng-click="flipView()">Flip!</div>

</div>
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
     var errorMap = new Object()

     errorMap['1'] = 'true'
     errorMap['2'] = 'false';
$scope.errorMap = errorMap

    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo' },
        { id: 2, first: 'Rocky', last: 'Balboa' },
        { id: 3, first: 'John', last: 'Kimble' },
        { id: 4, first: 'Ben', last: 'Richards' }
    ];

    $scope.flipView = function(){
        alert('flipped')
        $scope.errorMap['1'] = 'false'
        $scope.$apply
    }
});

Update : I changed the json to contain values true , false instead of 'true , 'false'. But same result. Updated fiddle : http://jsfiddle.net/9fR23/188/

Updated code :

errorMap['1'] = true
 errorMap['2'] = false;

Upvotes: 1

Views: 39

Answers (3)

charlietfl
charlietfl

Reputation: 171669

In your view you are treating errorMap as a function but it is an object literal. Also you are passing an integer but the keys for the object are strings

Try 

<td ng-show="errorMap['1']">{{ person.first + ' ' + person.last }}</td>

DEMO

Upvotes: 0

Pierre-Alexandre Moller
Pierre-Alexandre Moller

Reputation: 2354

It was just a little syntax erro. You have ( ) in errorMap([1]). Without this one, all is fine. 

<td ng-show="errorMap[1]">{{ person.first + ' ' + person.last }} </td>

Moreover, I think a simple boolean could do the trick.

There is the forked Fiddle

Upvotes: 1

Tomislav
Tomislav

Reputation: 3211

I've edited your fiddle:

HTML

<div ng-app="myapp" ng-controller="FirstCtrl">
    <table class="table table-striped">
        <tr ng-repeat="person in people">
            <td ng-show="errorMap">{{ person.first + ' ' + person.last }}</td>
        </tr>
    </table>

    <div ng-click="flipView()">Flip!</div>

</div>

Javascript

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
     $scope.errorMap=true;


    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo' },
        { id: 2, first: 'Rocky', last: 'Balboa' },
        { id: 3, first: 'John', last: 'Kimble' },
        { id: 4, first: 'Ben', last: 'Richards' }
    ];

    $scope.flipView = function(){
        alert('flipped');
        $scope.errorMap = !$scope.errorMap; //this is actual flipping (show/hide)

    }
});

Waiting for your feedback

Upvotes: 2

Related Questions