如何显示下拉 Angularjs-ui-select onclick on 超链接标签

How to show drop down Angularjs-ui-select onclick on hyperlink tags?

本文关键字：onclick Angularjs-ui-select on 超链接 标签 何显示 显示      更新时间：2023-09-26

我想将 ui-select 绑定到<a></a>标签，所以当我们点击这个标签时，它会显示 ui-select。

请看下面的演示 普伦克演示

在演示中，select-ui 单独显示，但我想只在单击以下下拉菜单（人、国家）时显示它，当我单击人时它显示以下 ui-select。同样，当我单击国家/地区时，它应该显示国家/地区的 ui-select。

它应该与下拉菜单一起附加， 

<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>

我按照Naga Sandeep的建议修改了我的pluncker DEMO，但是在选择了国家/地区后，我无法再次选择人。

您需要做的就是1） 在scope上切换属性2）ng-show该财产ui-select。

<a href="" ng-click="toggleCountry()">Click for countries</a>
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;" ng-show="showCountry">

在您的 js 文件中切换属性

$scope.showCountry = false;
$scope.toggleCountry = function()
{
    $scope.showCountry = !$scope.showCountry;
}

我更新了 plunker 示例： http://plnkr.co/edit/e64JGEakaKRVBgNwgpDg?p=preview

在控制器中，添加 isActive（） 函数：

//that function checks if the ui-select is active
 $scope.isActive = function(type){
    return $scope.selectedType == type;
  };

到 HTML 中：

只需将您的 ui-select 包装到<div></div>中并检查它们是否处于活动状态，如下所示：

<div ng-show="isActive('person')">
    <h3>Select2 theme</h3>
  <p>Selected: {{person.selected}}</p>
  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>  
  </div>

<div ng-show="isActive('country')">
  <h3>Selectize theme</h3>
  <p>Selected: {{country.selected}}</p>
  <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>
</div>

希望有帮助，祝你好运。

相关文章：