在搜索按钮单击时从表中搜索用户 - Angular JS答案

【问题标题】：Search user from table on search button click- Angular JS在搜索按钮单击时从表中搜索用户 - Angular JS
【发布时间】：2018-12-08 15:14:10
【问题描述】：

我正在尝试通过电子邮件 ID 搜索用户。这部分有效。如果我第一次通过输入电子邮件并单击搜索按钮来搜索用户，它就可以工作。但是，如果我搜索另一个用户，它的搜索会自动过滤，而无需按下搜索按钮。

我应该只有在单击搜索按钮后才能搜索用户。提前致谢

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope) {

  console.log("in controller...");
  $scope.newUser = {};
  $scope.info = "";

  // Users array list
  if (localStorage.getItem("users") === null) {
    $scope.users = [{
        email: "Vai@yahoo.com",
        password: "Sha123",
        firstName: "Vai",
        lastName: "LSha",
        contact: "123-223-8989",
        role: "Super-Admin",
        company: ""
      },
      {
        email: "John@yahoo.com",
        password: "John123",
        firstName: "John",
        lastName: "Doe",
        contact: "281-283-2480",
        role: "Supplier-Admin",
        company: "Apple"
      },
      {
        email: "Rick@yahoo.com",
        password: "Rick123",
        firstName: "Rick",
        lastName: "Fraiser",
        contact: "987-283-2489",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "Reek@yahoo.com",
        password: "Reek123",
        firstName: "Reek",
        lastName: "Phaine",
        contact: "876-277-2289",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "Jim@yahoo.com",
        password: "Jim123",
        firstName: "Jim",
        lastName: "Jones",
        contact: "487-283-2489",
        role: "Supplier-User",
        company: "Apple"
      }
    ];
    localStorage.setItem("users", JSON.stringify($scope.users));
  } else {
    $scope.users = JSON.parse(localStorage.getItem("users"));
  }

  //Deleting a user.
  $scope.deleteUser = function(user) {
    $scope.clickedUser = user;
    console.log($scope.users.indexOf($scope.clickedUser));
    $scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
    localStorage.setItem("users", JSON.stringify($scope.users));
    $scope.info = "User Deleted Successfully!";
  };

  $scope.clearInfo = function() {
    $scope.user = "";
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>User Management- M&M</title>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/userApp.js"></script>

</head>

<body ng-app="myApp" ng-controller="myController">

  <div>
    <input type="text" placeholder="Search Users" ng-model="searchUsers.email">
    <button ng-click="search = searchUsers" type="button">Search</button>
  </div>
  <hr>
  <table border="1">
    <thead>
      <tr class="table100-head">
        <th>Email</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Contact</th>
        <th>Role</th>
        <th>Company</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users | filter: {'email':search.email} track by $index">
        <td>{{user.email}}</td>
        <td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td>{{user.contact}}</td>
        <td>{{user.role}}</td>
        <td>{{user.company}}</td>
        <td>
          <button ng-click="deleteUser(user)" type="button">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【问题讨论】：

输入焦点时重置search
我该怎么做？请详细说明。我是 Angular JS 的新手
可以使用ng-focus docs.angularjs.org/api/ng/directive/ngFocus

标签： html angularjs

【解决方案1】：

在第一次尝试中，您的 search.email 未定义，当您单击搜索时，您的 search.email 已定义，因此下次您键入内容时，默认的两种数据绑定方式会触发搜索。

在下面的代码 sn-p 中我添加了一个新函数

$scope.searchUser = function(userEmail){
    $scope.searchEmail = userEmail
}

只有当用户点击按钮时，我才真正与触发搜索的 $scope 绑定。还添加了一个 onChange 事件，如果用户删除文本，它会重置搜索

  var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope) {

  console.log("in controller...");
  $scope.newUser = {};
  $scope.info = "";

  // Users array list
  
    $scope.users = [{
        email: "Vai@yahoo.com",
        password: "Sha123",
        firstName: "Vai",
        lastName: "LSha",
        contact: "123-223-8989",
        role: "Super-Admin",
        company: ""
      },
      {
        email: "John@yahoo.com",
        password: "John123",
        firstName: "John",
        lastName: "Doe",
        contact: "281-283-2480",
        role: "Supplier-Admin",
        company: "Apple"
      },
      {
        email: "Rick@yahoo.com",
        password: "Rick123",
        firstName: "Rick",
        lastName: "Fraiser",
        contact: "987-283-2489",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "Reek@yahoo.com",
        password: "Reek123",
        firstName: "Reek",
        lastName: "Phaine",
        contact: "876-277-2289",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "Jim@yahoo.com",
        password: "Jim123",
        firstName: "Jim",
        lastName: "Jones",
        contact: "487-283-2489",
        role: "Supplier-User",
        company: "Apple"
      }
    ];
    

  //Deleting a user.
  $scope.deleteUser = function(user) {
    $scope.clickedUser = user;
    console.log($scope.users.indexOf($scope.clickedUser));
    $scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
    localStorage.setItem("users", JSON.stringify($scope.users));
    $scope.info = "User Deleted Successfully!";
  };

  $scope.clearInfo = function() {
    $scope.user = "";
  };
  $scope.searchUser = function(userEmail){
	$scope.searchEmail = userEmail
  }
  $scope.onChange = function(){
	if($scope.email.length === 0){
		$scope.searchEmail = "";
		$scope.email = "";
	}
  }
});

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>User Management- M&M</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myController">

  <div>
    <input type="text" placeholder="Search Users" ng-change="onChange()" ng-model="email">
    <button ng-click="searchUser(email)"  type="button">Search</button>
  </div>
  <hr>
  <table border="1">
    <thead>
      <tr class="table100-head">
        <th>Email</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Contact</th>
        <th>Role</th>
        <th>Company</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users | filter: {'email': searchEmail} track by $index">
        <td>{{user.email}}</td>
        <td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td>{{user.contact}}</td>
        <td>{{user.role}}</td>
        <td>{{user.company}}</td>
        <td>
          <button ng-click="deleteUser(user)" type="button">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

哇！非常感谢！我现在明白了。