Angular - 爲每個顯示和隱藏元素分隔變量

我正嘗試創建自定義的切換手風琴菜單。我想逐個顯示並隱藏各個元素。我已經將功能剝離到了螺母和螺栓上。Angular - 爲每個顯示和隱藏元素分隔變量

我試圖爲每個我想顯示和隱藏的元素分開變量。 Jsfiddle

這是我的標記

<section ng-app="myApp"> 
    <div ng-controller="accordionCtrl"> 
    <div class="frq-accordion"> 
     <div class="panel panel-default"> 
      <!-- PANEL STARTS HERE--> 
      <div ng-click="frqToggle(hiddenToggleOne)" class="panel-heading"> 
       <div class="panel-title"> 
           <span>Some text goes here!</span> 
       </div> 
      </div><!-- PANEL HEADING ENDS HERE --> 
      <div id="collapseOne" ng-class="{isHidden: hiddenToggleOne}" class="panel-collapse"> 
       <p>Hidden menu is open</p> 
      </div> 
     </div><!-- PANEL ENDS HERE --> 
    </div> 
<!-- FRQ ACCORDION CONTAINER ENDS HERE --> 

<div class="frq-accordion"> 
     <div class="panel panel-default"> 
     <!-- PANEL STARTS HERE--> 
      <div ng-click="frqToggle(hiddenToggleTwo)" class="panel-heading"> 
       <div class="panel-title"> 
        <span>Some text goes here!</span> 
       </div> 
      </div><!-- PANEL HEADING ENDS HERE --> 
      <div id="collapseTwo" ng-class="{isHidden: hiddenToggleTwo}" class="panel-collapse"> 
       <p>Hidden menu is open</p> 
      </div> 
     </div><!-- PANEL ENDS HERE --> 
    </div> 
<!-- FRQ ACCORDION CONTAINER ENDS HERE --> 

<div class="frq-accordion"> 
     <div class="panel panel-default"> 
     <!-- PANEL STARTS HERE--> 
      <div ng-click="frqToggle(hiddenToggleThree)" class="panel-heading"> 
       <div class="panel-title"> 
        <span>Some text goes here!</span> 
       </div> 
      </div><!-- PANEL HEADING ENDS HERE --> 
      <div id="collapseThree" ng-class="{isHidden: hiddenToggleThree}" class="panel-collapse"> 
       <p>Hidden menu is open</p> 
      </div> 
     </div><!-- PANEL ENDS HERE --> 
    </div> 
<!-- FRQ ACCORDION CONTAINER ENDS HERE -->

ANGULAR

angular 
    .module('myApp') 
    .controller('futureCtrl', ['$scope', function($scope){ 


$scope.hiddenToggleOne = false; 
$scope.hiddenToggleTwo = false; 
$scope.hiddenToggleThree = false; 
$scope.hiddenToggleFour = false; 
$scope.hiddenToggleFive = false; 

$scope.frqToggle = function (toggleElem) { 
    toggleElem = !toggleElem; 
} 

}]);

來源

2016-09-29 NewKidOnTheBlock

在您的控制器功能frqToggle你是剛剛設置的局部變量toggleElem，而不是修改你的範圍變數。

可以動態地設置變量的作用域：

$scope.frqToggle = function (toggleElem) { 
    $scope[toggleElem] = !$scope[toggleElem]; 
}

然後，您將需要修改ng-click傳遞的元素的名稱，而不是元素的值。

來源

2016-09-29 12:06:31 Ryan27

ng-click =「frqToggle（）」？ – NewKidOnTheBlock

'ng-click =「frqToggle（'hiddenToggleOne'）」'應該做的。只需要將參數更改爲一個字符串，因爲如果不用單引號包裝它，angular會評估它並傳遞值。 – Ryan27

我在哪裏指定了我的變量$ scope.hiddenToggleOne = false;等等有沒有更好的做法呢？試想一下，如果我爲這段代碼創建一個循環，我不想在控制器中繼續調用我的變量 – NewKidOnTheBlock

Angular - 爲每個顯示和隱藏元素分隔變量

回答

相關問題