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

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 中，您可以在 url.

中的问号后附加此 urlParams 字符串

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

Call a function with a variable name depending on the checkboxes clicked

data-binding

angularjs

angularjs-bindings