CODEWITHSUNDEEP
htmlangularjs
Vaibhav Shankar
Vaibhav Shankar

Reputation: 23

Search user from table on search button click- Angular JS

I'm trying to search user by their email id. This partially works. If I search users for the first time by entering a email and clicking search button, it works. But then if I search of another user, its searches filters automatically without pressing the search button.

I should be able to search user only after I click the search button. Thanks in advance

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: "[email protected]",
        password: "Sha123",
        firstName: "Vai",
        lastName: "LSha",
        contact: "123-223-8989",
        role: "Super-Admin",
        company: ""
      },
      {
        email: "[email protected]",
        password: "John123",
        firstName: "John",
        lastName: "Doe",
        contact: "281-283-2480",
        role: "Supplier-Admin",
        company: "Apple"
      },
      {
        email: "[email protected]",
        password: "Rick123",
        firstName: "Rick",
        lastName: "Fraiser",
        contact: "987-283-2489",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "[email protected]",
        password: "Reek123",
        firstName: "Reek",
        lastName: "Phaine",
        contact: "876-277-2289",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "[email protected]",
        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>

Upvotes: 0

Views: 233

Answers (1)

Aamin Khan
Aamin Khan

Reputation: 722

In first attempt your search.email was undefined, and when you clicked on search your search.email got defined, so next time on wards when you type something the default two way data binding was triggering the search.

In the below code snippet I have added a new function

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

and only when the user clicks on the button I am actually binding with the $scope which is triggering the search. Also added an onChange event where if the user erase up the text it resets the search

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

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

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

  // Users array list
  
    $scope.users = [{
        email: "[email protected]",
        password: "Sha123",
        firstName: "Vai",
        lastName: "LSha",
        contact: "123-223-8989",
        role: "Super-Admin",
        company: ""
      },
      {
        email: "[email protected]",
        password: "John123",
        firstName: "John",
        lastName: "Doe",
        contact: "281-283-2480",
        role: "Supplier-Admin",
        company: "Apple"
      },
      {
        email: "[email protected]",
        password: "Rick123",
        firstName: "Rick",
        lastName: "Fraiser",
        contact: "987-283-2489",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "[email protected]",
        password: "Reek123",
        firstName: "Reek",
        lastName: "Phaine",
        contact: "876-277-2289",
        role: "Supplier-User",
        company: "Apple"
      },
      {
        email: "[email protected]",
        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>

Upvotes: 1

Related Questions