Как отображать содержимое внутри блока с помощью ng-click?

Question

У меня есть кнопка выпадающего меню на фронте, и теперь я должен отображать свой массив внутри отдельного . блок только при выпадающем списке.

Как это сделать?

Вот моего plunker

HTML

<div ng-controller="DropdownCtrl"> 

    <div class="row"> 
     <div class="col-md-12"> 
     <ul class="content"> 
      <li ng-repeat= 'task in tasks'> 

      </li> 
     </ul> 
     </div> 
    </div> 

    <!-- Here goes dropdown menu !--> 

    <div class="btn-group" dropdown="" is-open="status.isopen"> 
    <button id="single-button" type="button" class="btn btn-default btn-xl" dropdown-toggle="" ng-disabled="disabled"> 
     Options <span class="caret"></span> 
     </button> 

     <ul class="dropdown-menu" role="menu" aria-labelledby="single-button"> 
     <li role="menuitem"> 
      <a href="javascript:void(false)" ng-click="show('tasks')">Display tasks</a> 
     </li> 
     </ul> 

    </div> 
    </div> 

Js

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

myApp.controller('DropdownCtrl', function ($scope) { 

    $scope.tasks = [ 
    {title:'First Task'}, 
    {title: 'Second Task'} 
    ]; 

}); 

Answer 1

Я хотел бы предложить вам добавить selected свойства в вашем каждом элементе задачи, которая покажет вам ток элемент был выбран или нет. На основании этого вы могли бы фильтровать по selected, делая ng-repeat на tasks.

Markup

<div class="col-md-12"> 
    <div ng-show="filteredTask.length > 0">Below are selected Tasks</div> 
    <div ng-show="filteredTask.length == 0">No task selected</div> 
    <ul class="content"> 
     <li ng-repeat= 'task in filteredTask = (tasks | filter : {selected: true})'> 
     {{task.title}} 
     </li> 
    </ul> 
</div> 

<ul class="dropdown-menu" role="menu" aria-labelledby="single-button"> 
    <li role="menuitem" ng-repeat="task in tasks"> 
     <a href="javascript:void(false)" ng-click="task.selected = !task.selected">{{task.title}}</a> 
    </li> 
</ul> 

Demo Plunkr