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路綁定不起作用

回答

相關問題