Question

我有一个角度的用户管理视图，可以在表格中显示应用程序中的所有用户。在该表上方，我有一堆输入字段可以过滤用户。例如，当您在用户名字段中输入“admin”时，它会过滤下面的用户列表，仅显示用户名中包含“admin”的用户。

过滤器工作正常。但我要做的是有一个清除所有字段的按钮，并将用户列表重置为完整列表。

此代码段显示所有用户并设置过滤器功能：

<tr data-ng-repeat="user in users | filter:{userName: search.userName, lastName: search.lastName, firstName: search.firstName, status: search.status, roles: search.roles}">
   <td>{{user.userName}}</td>
   <td>{{user.firstName + " " + user.lastName}}</td>
   <td><ul><li class="usersearch-rolename" ng-repeat="role in user.roles">{{role.name}}</li></ul></td>
   <td>{{user.emailAddress}}</td>
   <td>{{user.status}}</td>
   <td><a class="yellow edit" href="#" ng-click="getUserId(user)"><span class="round-icon"><span class="border"></span><img src="/images/icons/icon_edit.png" alt="edit" class="icon"></span></a><br /></td>
</tr>

这是一个用于过滤其中一个用户属性的示例输入字段：

<div class="form-group">
  <label class="user-search-label" for="id_loginid">Username</label>
  <input type="text" placeholder="Login ID" name="login_id" id="id_loginid" class="user-search-input" ng-model="$parent.$parent.search.id">
</div

我的明确字段功能可以成功清除所有字段，但也会删除所有用户在页面上显示的内容：

scope.clearFields = function() {
    scope.search.userName = null;
    scope.search.lastName = null;
    scope.search.city = null;
    scope.search.state = null;
    scope.search.zip = null;
    scope.search.roles = null;
    scope.search.firstName = null;
    scope.search.phone = null;
    scope.search.status = null;
    console.log(scope.users);
};

我在最后添加了console.log来证明scope.users在执行clearFields函数后仍然保留所有用户 - 所以数据确实存在。

Answer 1

不要单独清除每个字段值，而是使用scope.search = {}。

否则您将拥有一个类似{userName: null, lastName: null}等的对象。过滤器会尝试比较每个属性，如果data.userName != null，则不满意。如果不存在该属性，则不进行比较。

清除过滤器表单会从视图中删除所有数据

1 个答案: