1
Angle JSからng-showバインドされたプロパティを変更しても、変更はUIに反映されません。しかし、他のプロパティの変更はUIに反映されています。以下は私のコードですAngular JS ng-showが動作しない
<!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プロパティをtrueに渡すと、バックエンドから機器が適切に拡張されています。 toggleTrackLocation（）関数では正しく動作しません。私はここで何が欠けているのですか？
「trackLocation.isVisible」は何を表しますか？ –