如何在超链接标签上显示下拉Angularjs-ui-select onclick？答案

【问题标题】：How to show drop down Angularjs-ui-select onclick on hyperlink tags?如何在超链接标签上显示下拉Angularjs-ui-select onclick？
【发布时间】：2016-03-09 06:12:31
【问题描述】：

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

请看下面的演示Plunker DEMO

在演示中，select-ui单独显示，但我想仅在单击以下下拉列表（人，国家/地区）时显示，当我单击人员时显示以下内容用户界面选择。同样，当我单击国家/地区时，它应该显示国家/地区的 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，但在选择国家后，我无法再次选择人。

【问题讨论】：

标签： javascript jquery html angularjs jquery-ui

【解决方案1】：

你需要做的就是 1) 在scope 上切换属性 2）ng-showui-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;
}

【讨论】：

感谢回复，但是不会附上对应的超链接，我想附上ui-select的超链接..
你试过我的代码了吗？究竟是什么不起作用。添加我的代码后，你能显示一个 plunker 吗？
嗨 Sandeep，请看链接，plnkr.co/edit/rqpqKtcwVxX7vKJutYKZ?p=preview 但在选择国家后，我无法再次选择人..

【解决方案2】：

我更新了 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>

希望有帮助，祝你好运。

【讨论】：