javascript - 单击不改变 View

Question

在这个 fiddle 中:

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

当我点击 div 元素“翻转!”时，表格元素没有被隐藏。当我更改由 ng-show

确定的结构状态时，元素应该隐藏起来

map 正在更新，但似乎没有应用？

我尝试在调用翻转时添加 $scope.$apply 以阻止，但结果相同。如何在底层 map 数据结构发生变化时更新 ng-show 的状态？

fiddle 代码:

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

更新:我将 json 更改为包含值 true 、 false 而不是“true”、“false”。但同样的结果。更新 fiddle :http://jsfiddle.net/9fR23/188/

更新代码:

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

Answer 1

我已经编辑了你的 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)

    }
});

等待您的反馈