Я новичок в AngularJS, и я видел, как другие задают подобные вопросы, но ответы не работают для меня. Вместо того, чтобы захламлять эти вопросы, я решил открыть один для себя.
Я создаю демонстрационное приложение — в нем перечислены «сайты», которые можно добавить или удалить. Я использую атрибут ng-show для отображения необходимого html div, скрывая остальные.
Вот внутренний javascript--
var SiteMaintenanceModule = angular.module("SitesMaintenance", []);
SiteMaintenanceModule.controller("siteCtrl", diveSiteCtrlfn);
function diveSiteCtrlfn($scope) {
// initializing the sites array
$scope.sites = sites;
//initializing the Divs array
$scope.allowedDivs = ["listSiteDiv","addSiteDiv", "editSiteDiv","deleteSiteDiv"];
// setting the first div as selected. This should show the div which lists the sites
$scope.selectedDiv = $scope.allowedDivs[0];
// function to be called with the selected div is to be changed
$scope.setSelectedDiv = function ($divSelectedByUser) {
$scope.selectedDiv = $divSelectedByUser;
}
};А вот хтмл
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="SitesMaintenance">
<head>
<title>List of Dive Sites</title>
<link rel="Stylesheet" href="./../zHelpers/bootstrap/css/bootstrap.css" />
<script src="./../zHelpers/angular.min.js"></script>
<script src="./sites.js"></script>
<script src="./SiteMaintenance.js"></script>
</head>
<body ng-controller="siteCtrl">
<!-- Display the list of sites based on the selectedDiv variable-->
<div id="SiteList" ng-show="{{selectedDiv == 'listSiteDiv'}}">
<h3>List of Sites</h3>
<ul ng-repeat="site in sites" ng-model="sites">
<li>{{site.site}} in {{site.location}}</li>
</ul>
</div>
<!-- Display the add site Div based on the selectedDiv variable-->
<div id="AddSite" ng-show="{{selectedDiv == 'addSiteDiv'}}">
<h3>Add New Site</h3>
<div style="display:block; margin:10px">Site: <input id="inputAddSiteName" /></div>
<div style="display:block; margin:10px">Location: <input id="inputAddSiteLocation" /></div>
</div>
<!-- Display the edit site Div based on the selectedDiv variable -->
<div id="EditSites" ng-show="{{selectedDiv == 'editSiteDiv'}}" style="display:block;margin:20px">
Site Name:<input id="InputEditSiteName" />
Site Location:<input id="InputEditSiteLocation" />
</div>
<div id="controls">
<button id="AddNewSiteButton" ng-click="setSelectedDiv('addSiteDiv')">Add Site</button>
<button id="DeleteSiteButton" ng-click="setSelectedDiv('deleteSiteDiv')">Delete Site</button>
<button id="EditSiteButton" ng-click="setSelectedDiv('editSiteDiv')">Edit Site</button>
</div>
</body>Я могу установить видимый div на все, что захочу в начале, изменив индекс в выражении «$scope.selectedDiv = $scope.allowedDivs[0];» в JavaScript.
Я изменяю значение $scope.selectedDiv при нажатии любой из кнопок на странице, чтобы изменить видимость элементов div.
Однако видимость элементов div не меняется независимо от значения переменной $scope.selectedDiv. На самом деле, при отладке в chrome я вижу, что значение атрибута ng-show для каждого из моих div динамически обновляется до «true» или «false» и ожидаемо, но div все еще отображается — кажется, что изначально невидимые div иметь атрибут class="ng-hide", который никогда не меняется.
Я пробовал $scope.$apply() в JavaScript, но это дает ошибки. Любая помощь будет принята с благодарностью.
