Question

我有两个按钮，我试图根据点击特定按钮（ng-click）显示不同的数据

更新：我有一个不使用data-ng-click="search.status = 'OPEN';Data1=true;"

的第三个按钮

<div ng-app="myApp">
  <p class="description">Click on the "show"-link to see the content.</p>
  <li ><a data-ng-click="Data1=true;Data2=false" href="">ALL PROJECTS</a></li>
  <li ><a data-ng-click="Data2=true;Data1=false" href="">NOTIFICATIONS</a></li>
  <li  ng-if="role === 'admin'" ><a data-ng-click="search.status = 'OPEN' , Data1=true;" href="">SAVED PROJECTS</a></li>

  <div class="wrapper" ng-controller="myCtrl">
    <h2 ng-hide=Data2 ng-show="Data1">This is mah Data1, yo!</h2>
    <h2 ng-hide=Data1 ng-show="Data2">This is mah Data2, yo!</h2>
  </div>
</div>

Update2：这是我的实际列表数据

<ul class="list_of_projects row">                                   
        <li ng-show="Data1" ng-repeat="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 10">
            <a href="">
                <h4>{{wd.name}}</h4>
            </a>
            <p>Status: {{wd.status}}</p>
        </li>
        <li ng-show="Data2">Data2</li>
    </ul>
    <dir-pagination-controls boundary-links="true"></dir-pagination-controls>

当我点击第二个按钮（Data2）时，如何隐藏第一个按钮（Data1）的数据，反之亦然

Answer 1

<强>已更新在这种情况下，你需要两个布尔值：

<div class="wrapper" ng-controller="myCtrl">
    <li ><a data-ng-click="Data1=true;Data2=false" href="">ALL PROJECTS</a></li>
    <li ><a data-ng-click="Data2=true;Data1=false" href="">NOTIFICATIONS</a></li>
    <li  ng-if="role === 'admin'" ><a data-ng-click="search.status = 'OPEN'; Data1=true;" href="">SAVED PROJECTS</a></li>

    <h2 ng-show="Data1">This is mah Data1, yo!</h2>
    <h2 ng-show="Data2">This is mah Data2, yo!</h2>
</div>

确保将按钮和数据放在同一控制器中以防止确定范围问题。

查看Plunker

中的工作示例

Answer 2

请查看工作示例：Demo

在Html中

<button ng-click="showData = 1">Show Data 1</button>
<button ng-click="showData = 2">Show Data 2</button>

<div ng-if="showData == 1">Data1</div>
<div ng-if="showData == 2">Data2</div>

Answer 3

试试这个

  <button ng-click="Data1=true;Data2=false">Data 1</button> 
  <button ng-click="Data2=true;Data1=false">Data2</button>

Answer 4

你不需要两个布尔来做这个

<button ng-click="DataLbl= false">Data 1</button> 
<button ng-click="DataLbl= true">Data 2</button> 
<h2 ng-hide="DataLbl"  >This is mah Data1, yo!</h2>
<h2 ng-hide="!DataLbl"  >This is mah Data2, yo!</h2>

Answer 5

试试这个

var app = angular.module('MyApp', [])
app.controller('myCtrl', function($scope) {
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <p class="description">Click on the "show"-link to see the content.</p>
  <li><a data-ng-click="Data1=true;Data2=false" href="">ALL PROJECTS</a>
  </li>
  <li><a data-ng-click="Data2=true;Data1=false" href="">NOTIFICATIONS</a>
  </li>
  <li><a data-ng-click="search.status = 'OPEN' ; Data1=true;" href="">SAVED PROJECTS</a>
  </li>

  <div class="wrapper" ng-controller="myCtrl">
    <h2 ng-show="Data1">This is mah Data1, yo!</h2>
    <h2 ng-show="Data2">This is mah Data2, yo!</h2>
  </div>
</div>

如何在角度按钮上单击显示不同的数据

5 个答案: