如何使用ng单击来渲染块内的内容

How to render content inside the block with ng-click?

本文关键字：何使用 ng 单击      更新时间：2023-09-26

我在前端设置了下拉按钮，现在只有在选择下拉项时，我才能在单独的内容块中显示我的数组。

我该怎么做？

这是我的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

相关文章：