我正在尝试通过用户的电子邮件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>
答案 0 :(得分：1)
第一次尝试时，您的search.email是未定义的，而当您单击search时，您的search.email被定义了，因此下次在病房中键入某些内容时，默认的双向数据绑定触发了搜索。
在下面的代码片段中，我添加了一个新功能
$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>