Question

我要做的是制作搜索功能。我希望通过使用复选框并根据每个复选框的值调用控制器中的函数来有多个选项。详细介绍我到目前为止所做的是一个下拉菜单：

<input type="text" placeholder="Search Keyword..." ng-model="searchKeyword">
<select ng-model="selectedProperty">
    <option value="usersUsername">Users: Username</option>
    <option value="accountsName">Accounts: Name</option>
</select>
<button type="submit" ng-click="search()">Search</button>

在控制器中我正在检查选择了哪个属性，我正在调用相应的函数

$scope.search = function () {
  switch ($scope.selectedProperty) {
    case 'usersUsername':
        searchByUsersUsername($scope.searchKeyword)
        break;
    case 'accountsName':
        searchByAccountsName($scope.searchKeyword)
        break;
    }
};

所以我现在正在尝试将下拉菜单更改为多个选中的复选框，例如，如果选择了users-usernames和accounts-name来调用控制器中的函数searchByUsersUsernameAccountsName（$ scope.searchKeyword）。

Answer 1

您可以通过控制器作用域中的对象数组显示复选框，其中属性绑定到复选框值。在搜索功能中，您检查绑定到复选框的每个对象的属性值。

这是我想到的代码示例。

在控制器中

$scope.checkboxes = [ 
{ checked: false, value: "Username", url_key: "searchAccountsName" },
{ checked: false, value: "Accounts Name", url_key: "searchUsersU‌sername" } ];

现在在HTML文件中，通过ng-repeat

渲染这些复选框

<div class="ui fluid action large input">
   <input type="text" placeholder="Search Keyword..." ng-model="searchKeyword">
   <div class="checkboxes">
      <div ng-repeat="checkbox in checkboxes">
          <input type="checkbox" ng-model="checkbox.checked"/> {{checkbox.value}}
      </div>
   </div>
</div>

现在在控制器中的搜索功能

$scope.search = function () {
  var urlParams = "";
 for (var i = 0; i < $scope.checkboxes.length; i++){
   if( $scope.checkboxes[i].checked ){
      urlParams = urlParams + $scope.checkboxes[i].url_key + '=true&'
   }
 }

 var urlParams = urlParams + "searchK‌eyword="+ $scope.searchKeyword;
 searchFn(urlParams);
}

在searchFn中，您只需在网址中的问号后附加此urlParams字符串即可。

根据单击的复选框调用具有变量名称的函数

1 个答案: