Angular JS ng-show不起作用

时间:2016-07-25 11:45:54

标签: angularjs

当我从angular JS更改ng-show binded属性时,仍然没有在UI中反映出更改。但其他房产变化在UI中反映良好。以下是我的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

    <div ng-app="maintainOnlineEquipmentApp" ng-controller="MaintainOnlineEquipmentController">

        <table class="table">
            <tr class="success">
                <td>Equipment Init</td>
                <td>Equipment Number</td>
                <td>L/E</td>
            </tr>
            <tbody ng-repeat="trackLocation in trackLocations">
                <tr ng-click="toggleTrackLocation()">
                    <td>{{trackLocation.locationName}}</td>
                </tr>
                <tr class="info" ng-repeat="equipment in trackLocation.trackLocationEquipments" ng-show="{{trackLocation.isVisible}}">
                    <td>{{equipment.equipInitial}}</td>
                    <td>{{equipment.equipNum}}</td>
                    <td>{{equipment.equipStatusCd}}</td>
                </tr>
            </tbody>
        </table>

    </div>

    <script>
        var app = angular.module('maintainOnlineEquipmentApp', []);

        app.controller('MaintainOnlineEquipmentController',
            function($scope, $http) {

                this.getTrackLocations = function() {
                    $http.get("/command/maintainOnlineEquipmentAngularPreAction.do")
                        .then(
                            function(response) {
                                $scope.trackLocations = response.data;
                            });
                };

                this.getTrackLocations();

                $scope.toggleTrackLocation = function() {
                    $scope.trackLocations[4].isVisible = true;
                    $scope.trackLocations[4].locationName = 'A';
                    $scope.$apply();
                };

            });
    </script>

</body>
</html>

在以下代码中,ng-show绑定到isVisible属性。此属性最初为false。所以设备崩溃了。当我点击轨道位置行时,它应该被扩展。在切换轨道位置功能中,我将isVisible属性更改为true。仍然没有在UI中反映出来。但是其他属性更改locationName在UI中反映得很好。

从最后通过isVisible属性的后端开始,设备正在正常扩展。只是没有通过toggleTrackLocation()功能正常工作。我在这里缺少什么?

1 个答案:

答案 0 :(得分:0)

ngShow采用Angular expression,而非插值标记。正确的表示法:

ng-show="trackLocation.isVisible"