AngularJS ng-show 2路绑定不起作用

我是AngularJS的新手，我看到其他人提出类似的问题，但答案并不适用于我。我不想劫持这些问题，而是想为自己开一个问题。AngularJS ng-show 2路绑定不起作用

我正在创建一个演示应用程序 - 它列出了可以添加或删除的“网站”。我使用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

<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的可见性。

但是，无论$ scope.selectedDiv的值是多少，div的可见性都不会改变。实际上，在使用chrome进行调试时，我发现ng-show的每个div的属性值会动态更新为“true”或“false”，但仍然会显示div - 最初不可见的div似乎有一个class =“ng-hide”属性，它永远不会改变。

我已经在JavaScript中尝试了$ scope。$ apply（），但是这给出了错误。任何帮助将不胜感激。

来源

2016-01-17 Akash

您不需要在ng-show指令指令内使用{{}}插值，它直接评估控制器的$scope中的表达式。

ng-show="selectedDiv == 'addSiteDiv'" 
ng-show="selectedDiv == 'listSiteDiv'" 
ng-show="selectedDiv == 'editSiteDiv'"

来源

2016-01-17 10:05:39

这个答案是正确的。我确认过了！ –

非常感谢。这工作。没有意识到添加{{}}可能会导致问题。 – Akash

@Akash np。很高兴帮助你..谢谢:) –

AngularJS ng-show 2路绑定不起作用

回答

相关问题