当我从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()功能正常工作。我在这里缺少什么?