ng-clickを使用してng-repeatをアクティブにします

基本的に、ng-repeatを使用してこのメニューを作成しました。これらの表示されたフィールドの1つをクリックすると、別のng-repeatを作成して、下の他のフィールドを押します。私はクリックでこの2番目のng-repeatを有効にし、ユーザーが再びクリックすると元に戻すだけです。意味、ng-repeatはユーザーがボタンをクリックした後にのみ発生します。ng-clickを使用してng-repeatをアクティブにします

これをどのように実行する必要がありますか？ユーザーは、コレクションをクリックすると

<div ng-repeat="collection in library" ng-click="setCollection(collection)"> 
      <li class="list-group-item">{{collection.Collection}}</li> 
</div>

そして、ここでは、私はJSファイル

$scope.library = [ 
      { 
       Collection: "Harry Potter", 
       value: false, 
       books: [ 
        { 
         book: "Sorcerer Stone", 
         value: false       
        }, 
        { 
         book: "Goblet of Fire", 
         value: false, 
        } 
       ] 
      }, 
      { 
       Collection: "LOTR", 
       value: false, 
       books: [ 
        { 
         book: "Two Towers", 
         value: false       
        }, 
        { 
         book: "Return of the King", 
         value: false, 
        } 
       ] 
      } 
     ]; 

     $scope.setCollection = function(collection){ 
      collection.value = !collection.value; 
     };

からいくつかのコードを持っているだから右のコレクション名の下にすべての書籍をNG-繰り返されます。同じコレクションで再度クリックすると、すべてが再び非表示になります。コレクションをクリックした後で書籍をクリックすると、その値を！valueに設定します。値をtrueまたはfalseに設定すると、コレクションおよびブックで作業する必要があります。

ありがとうございました:)

出典

2017-08-25 N.Car

私達にあなたのコードを表示します。アイテムを表示するためにクラスを適用することも、ng-showを使用して表示することもできます。] – Fals

私は、いくつかのコードといくつかの単語を追加して私の場合を説明しました。 –

私のソリューションをチェックして、それが役に立っているかどうか確認してください。@ N.Car – codeninja

私はあなたが望むようにデモを作成しました。ちょっとしたコードを変更するだけです。

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.title = 'Welcome varun'; 
 
    $scope.mainMenu = [{ 
 
    title: 'A', 
 
    subMenu: ['A1', 'A2'], 
 
    subMenuDisplay: false 
 
    }, { 
 
    title: 'B', 
 
    subMenu: ['B1', 'B2', 'B3'], 
 
    subMenuDisplay: false 
 
    }, { 
 
    title: 'C', 
 
    subMenu: ['C1', 'C2'], 
 
    subMenuDisplay: false 
 
    }]; 
 

 
    $scope.toggle = function(menu) { 
 
    menu.subMenuDisplay = !menu.subMenuDisplay; 
 
    }; 
 
}

.menu { 
 
    min-width: 50px; 
 
    min-height: 30px; 
 
    background: grey; 
 
    border: 2px solid black; 
 
    cursor:pointer; 
 
} 
 
.subMenu { 
 
    min-width: 50px; 
 
    min-height: 30px; 
 
    background: magenta; 
 
    border: 2px solid black; 
 
    cursor:auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<body ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div> 
 
    {{title}} 
 
    </div> 
 
    <div> 
 
    <div class='menu' ng-repeat='menu in mainMenu' ng-click='toggle(menu)'> 
 
     {{menu.title}} 
 
     <div class='subMenu' ng-repeat='sub in menu.subMenu' ng-show='menu.subMenuDisplay' ng-click='$event.stopPropagation()'> 
 
     {{sub}} 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

出典

2017-08-25 20:25:21

ほとんど完璧です。しかし、最初のメニューをクリックしたときにトグルしたいのであれば、どうしますか？つまり、Aをクリックすると、Aをもう一度クリックすると、それが隠れるはずです。サブメニュー項目をクリックすると、サブメニューを開くだけで、現在のように切り替えることはできません。 –

もう一度確認できますか？このデモを更新しましたが、Aをクリックするとサブメニューを表示/非表示にしますが、サブメニューをクリックしても効果はありません –

ああ！完璧に動作します！しかし、このng-click = '$ event.stopPropagation（）'は何を実行しますか？このng-clickに他の機能を追加したいと思いますが、私はできないでしょうか？ –

は、あなたが持っているとしましょう：

<ul ng-hide="someVariable"> 
    <li ng-repeat="foo in bar"></li> 
</ul>

そして、NG-クリックこれを行うたまたまどこ：

：

<button ng-click="showStuff()">Show Hidden Stuff!</button>

そして、あなたのコントローラの内部には、これを行います

$scope.someVariable = true; 
$scope.showStuff = function(){ 
    If($scope.someVariable){ 
     $scope.someVariable = false; 
    } else { 
     $scope.someVariable = true; 
    } 
}

出典

2017-08-25 19:50:27 codeninja

おそらくd

<div ng-controller="TestController as ctrl"> 
    <ul class="menu"> 

    <li ng-repeat="item in ctrl.menu.items"> 
     <a ng-click="ctrl.openSubmenu(item)">{{item.label}}</a> 

     <ul class="submenu" 
      ng-if="item.submenuIsOpen"> 

     <!-- Submenu content right here --> 

     </ul> 
    </li> 

    </ul> 
</div>

// On your controller 
var vm = this; 

// Set the menu object with items 
vm.menu = { 
    items: [ 
    { 
     label: 'Item 1', 
     submenuIsOpen: false 
    }, 
    { 
     label: 'Item 1', 
     submenuIsOpen: false 
    } 
    ] 
} 

// Then create the open submenu function 
vm.openSubmenu = function(item) { 
    item.submenuIsOpen = !item.submenuIsOpen; 
}

@codeninjaが指摘したようにあなたは、同様に$スコープを使用することができます。このような何かをoing。

出典

2017-08-25 20:02:16

ng-clickを使用してng-repeatをアクティブにします

答えて

関連する問題