1
Angular JS에서 ng-show binded 속성을 변경하면 여전히 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'의 의미는 무엇입니까? –