Question

我有以下codepen，我在这里尝试学习如何基于单击的span元素过滤数据。数据正在表中显示。 angularjs文档提供了有关使用过滤器以及ng-repeat属性的信息，不确定如何触发表外过滤。就我而言，我希望能够更改单击特定跨度元素时显示的数据。我应该如何处理？我有一个openModal函数，当单击一个按钮时，该函数会显示模式，但我不必为显示数据做任何事情即可。谢谢。

HTML

<div class="container" ng-app="myApp" ng-controller="myController">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-6 my-auto">
          <span>All</span>
          <span>Hawks</span>
          <span>Sparrows</span>
          <span>Doves</span>
        </div>
        <div class="col-6 my-auto">
          <label class="my-auto float-right">Search:
            <input ng-model="searchText">
          </label>
        </div>
      </div>
      <div class="row table-responsive">
        <table id="searchTextResults" class="table table-striped">
            <tr>
                <th ng-click="sortBy('ID')">ID</th>
                <th ng-click="sortBy('Name')">Bird Name</th>
                <th ng-click="sortBy('Type')">Type of Bird</th>
            </tr>
          <tr>
                        <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
              <td><a href="#">{{birds.ID}}</a></td>
              <td><a href="#">{{birds.Name}}</a></td>
              <td><a href="#">{{birds.Type}}</a></td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
            </tr>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 1

您只需将ng-click函数添加到span元素，然后单击该元素即可设置searchText。请参阅下面的演示。您可以进一步简化它，而不是对span元素进行硬编码，而可以使用ng-repeat动态生成，因此，如果添加任何新的span元素，只需将其添加到数组中即可。希望这会有所帮助。

简化版本如下所示。

<span ng-repeat="tab in tabs" ng-click="update(tab.value)">{{tab.label}}</span>

 $scope.tabs = [ { value: '', label: 'All' }, { value: 'Dove', label: 'Doves'}]; 

 $scope.update = function(filterText) {
      $scope.searchText = filterText;
 }

span {
  margin: 10px;
  cursor: pointer;
}

span:hover {
  background-color: black;
  color: white;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="myController">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-6 my-auto">
          <span ng-click="update('')">All</span>
          <span ng-click="update('Hawk')">Hawks</span>
          <span ng-click="update('Sparrow')">Sparrows</span>
          <span ng-click="update('Dove')">Doves</span>
        </div>
        <div class="col-6 my-auto">
          <label class="my-auto float-right">Search:
            <input ng-model="searchText">
          </label>
        </div>
      </div>
      <div class="row table-responsive">
        <table id="searchTextResults" class="table table-striped">
            <tr>
                <th ng-click="sortBy('ID')">ID</th>
                <th ng-click="sortBy('Name')">Bird Name</th>
                <th ng-click="sortBy('Type')">Type of Bird</th>
            </tr>
          <tr>
                        <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
              <td><a href="#">{{birds.ID}}</a></td>
              <td><a href="#">{{birds.Name}}</a></td>
              <td><a href="#">{{birds.Type}}</a></td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
            </tr>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
var app = angular.module('myApp', []);
  app.controller('myController',
        function ($scope, $http) {

  $scope.list = [
  {
     "ID": "001",
     "Name": "Eurasian Collared-Dove",
     "Type": "Dove"
  },
  {
      "ID": "002",
      "Name": "Bald Eagle",
      "Type": "Hawk"
  },
  {
      "ID": "003",
      "Name": "Cooper's Hawk",
      "Type": "Hawk"
  },
  {
      "ID": "004",
      "Name": "Bell's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "005",
      "Name": "Mourning Dove",
      "Type": "Dove"
  },
  {
      "ID": "006",
      "Name": "Rock Pigeon",
      "Type": "Dove"
  },
  {
      "ID": "007",
      "Name": "Abert's Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "008",
      "Name": "Brewer's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "009",
      "Name": "Canyon Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "010",
      "Name": "Black Vulture",
      "Type": "Hawk"
  },
    {
     "ID": "011",
     "Name": "Eurasian Collared-Dove",
     "Type": "Dove"
  },
  {
      "ID": "012",
      "Name": "Bald Eagle",
      "Type": "Hawk"
  },
  {
      "ID": "013",
      "Name": "Cooper's Hawk",
      "Type": "Hawk"
  },
  {
      "ID": "014",
      "Name": "Bell's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "015",
      "Name": "Mourning Dove",
      "Type": "Dove"
  },
  {
      "ID": "016",
      "Name": "Rock Pigeon",
      "Type": "Dove"
  },
  {
      "ID": "017",
      "Name": "Abert's Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "018",
      "Name": "Brewer's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "019",
      "Name": "Canyon Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "020",
      "Name": "Black Vulture",
      "Type": "Hawk"
  },
        {
     "ID": "021",
     "Name": "Eurasian Collared-Dove",
     "Type": "Dove"
  },
  {
      "ID": "022",
      "Name": "Bald Eagle",
      "Type": "Hawk"
  },
  {
      "ID": "023",
      "Name": "Cooper's Hawk",
      "Type": "Hawk"
  },
  {
      "ID": "024",
      "Name": "Bell's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "025",
      "Name": "Mourning Dove",
      "Type": "Dove"
  },
  {
      "ID": "026",
      "Name": "Rock Pigeon",
      "Type": "Dove"
  },
  {
      "ID": "027",
      "Name": "Abert's Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "028",
      "Name": "Brewer's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "029",
      "Name": "Canyon Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "030",
      "Name": "Black Vulture",
      "Type": "Hawk"
  }
  ];
  $scope.count = $scope.list.length;
  $scope.reverseOrder = true;
  $scope.sortField = 'ID';
    
  $scope.sortBy = function(sortField) {
  $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
      $scope.sortField = sortField;
  };
    
    $scope.openModal = function() {
      debugger
      modal.style.display = "block";
    }
    
    $scope.update = function(filterText) {
      $scope.searchText = filterText;
    }
  });

// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  console.log("button clicked");
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

在AngularJS数据表之外触发过滤

1 个答案: