0

我想做的是做一个搜索功能。我想通过使用复选框并根据每个复选框的值来调用控制器中的函数来获得多个选项。详细来说，我到目前为止所做的是一个下拉菜单：

<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;
    }
};

所以我现在正在尝试将下拉菜单更改为多个选中的复选框，例如，如果同时选择用户用户名和帐户名来调用控制器 searchByUsersUsernameAccountsName($scope.searchKeyword) 中的函数。

4

1 回答 1

0

您可以通过控制器范围内的对象数组显示复选框，该对象具有与复选框值绑定的属性。在搜索功能中，您检查绑定到复选框的每个对象的属性值。

这是我想到的代码示例。

在控制器中

$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在 url 中的问号后面附加这个字符串。

于 2017-06-01T10:07:36.003 回答