如何使用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上進行篩選，同時在tasks上執行ng-repeat。

標記

<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