如何使用ng-click来渲染块内的内容？

问题描述：

我已经在前端设置了下拉按钮，现在只有在选择了下拉项目时，我必须在单独的内容块中显示我的数组。如何使用ng-click来渲染块内的内容？

我该怎么做？

这里是我的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'} 
    ]; 

});

答

我建议你添加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

如何使用ng-click来渲染块内的内容？

相关推荐