使用ng-click激活ng-repeat

所以基本上我使用ng-repeat創建了這個菜單，它顯示了一個數組內的對象字段。然後，當我點擊這些顯示的字段之一時，我想進行另一個ng-repeat，它將推動下面的其他字段。我只想在點擊時激活第二個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-重複的集合名稱正下方的所有書籍。如果再次點擊相同的集合，它們都會再次隱藏。如果點擊集合後點擊某本書，我希望它將該值設置爲！值。將值設置爲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上添加一些其他的功能，我wouldnt能夠，我會嗎？ –

比方說，你有：

<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指出。

來源

2017-08-25 20:02:16

使用ng-click激活ng-repeat

回答

相關問題