2016-04-01 7 views
0

私のプログラムでは、変数を使用してng-showの値を設定したいので、いつでもng-showを変更します。ng-repeat配列の値を使用してng-showを設定したい

角度コードは次のとおりです。ここで

var arrowup,arrowdown; 
    arrdown=false; 
    $scope.header=[{"name":"Subsection Header #1","arrowup":"arrowup","close":"close","arrowdown":"arrowdown","open":"open"}]; 

    $scope.open = function() { 
     arrowdown = false; 
     arrowup = true; 
     } 

私はng-showの値を変更したいが、それは変更されません。

htmlコードは次のとおりです。あなたが角にテンプレートに結合するために使用することはできません

<div class="arrow-down" ng-repeat="header in header" ng-click="this[header.open]()" ng-show="header.arrowdown "> 

+2

'header in header'はあいまいです – maioman

+1

' var arrowup、arrowdown; '= => '$ scope.arrowup'と' $ scope.arrowdown' – Tushar

答えて

0

、代わりに$scopeを使用しています。

同じ名前のng-repeatも使用できません。

最後にthis[header.open]()ng-clickに入力する必要はありません。open()を使用してください。

$scope.arrowdown=false; 
$scope.header=[{"name":"Subsection Header #1","arrowup":"arrowup","close":"close","arrowdown":"arrowdown","open":"open"}]; 

$scope.open = function() { 
    $scope.arrowdown = false; 
    $scope.arrowup = true; 
} 

<div class="arrow-down" ng-repeat="head in header" ng-click="open()" ng-show="head.arrowdown"> 
+0

機能が動作していますng-showが変更されていません。 –

+0

"ng-show =" head.arrowdown "'を 'ng-show =" arrowdown "'に変更したいかもしれません:) –

0

このコードは、クリックでショーを切り替えます:

$scope.headers=[{"name":"Subsection Header #1","arrowup":"arrowup","close":"close","arrowdown":"arrowdown","open":"open", show: false}]; 

    $scope.open = function(header) { 
     header.show = !header.show; 
     } 

<div class="arrow-down" ng-repeat="header in headers" ng-click="open(header)" ng-show="header.show"> 
0

あなたが本当に出力として望むものは明らかではない、私はあなたのためのサンプルを作成しました:

angular.module('app', []) 
 
    .controller('MyCtrl', function ($scope) { 
 
    $scope.arrowdown = true; 
 
    $scope.arrowup = false; 
 
    
 
    $scope.headers=[{ 
 
     "name":"Subsection Header#1", 
 
     "arrowup":"arrowup", 
 
     "close":"close", 
 
     "arrowdown":"arrowdown", 
 
     "open":"open"}]; 
 

 
    $scope.open = function() { 
 
     $scope.arrowdown = !$scope.arrowdown; 
 
     $scope.arrowup = !$scope.arrowup; 
 
     } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller="MyCtrl"> 
 

 
    <div class="arrow-down" 
 
     ng-repeat="header in headers"  
 
     ng-show="arrowdown">{{header | json}} 
 

 
    </div> 
 
    <button ng-click="open()">Show/Hide</button> 
 
</div>