Question

这是我的代码，我想在下拉列表的第一个位置显示所选值。

组织

  <div class="ui selection dropdown" > 
    <input type="hidden"
           name="organization"
           ng-model="accountDetails.organization">
    <i class="dropdown icon"></i>


    <div class="text" 
         ng-class="{ 'default':(!accountDetails.organization)  }">None

    </div>
    <div class="menu">
      <div class="item"
           ng-repeat="(shortName, organization) in organizations"
           ng-click="accountDetails.organization"
           data-value="{{ organizationName(shortName)}}"
           data-text="{{ organizationName(shortName) }}">
           {{ organization}} 
      </div>      
    </div>
    </div>
</div>

Answer 1

您必须使用数组，而不是迭代没有内在顺序的对象的属性。

一旦你有这个组织数组，确保你想要的第一个位置是数组的第一个元素，并使用

<div class="item"
       ng-repeat="org in organizations"
       ng-click="selectOrganization(org)"
       data-value="{{ organizationName(org.shortName)}}"
       data-text="{{ organizationName(org.shortName) }}">
       {{ org.organization}} 
</div>

也就是说，即使使用数组而不是对象肯定是个好主意，每次用户选择菜单时，我都会重新排序菜单中的元素。这会让用户感到困惑，看起来很奇怪。

Answer 2

按照已经说过的方式对数组进行ng-repeat并编写一个过滤器，它不会真正过滤，而是重新排列数组。 HTML已经发布，包括过滤器：

<div class="item"
       ng-repeat="org in organizations | customFilter: accountDetails.organization"
       ng-click="selectOrganization(org)"
       data-value="{{ organizationName(org.shortName)}}"
       data-text="{{ organizationName(org.shortName) }}">
       {{ org.organization}} 
</div>

和过滤器：

app.filter('customFilter', function() {

  return function(input, organization) {

  var out = [];

  angular.forEach(input, function(organization) {
    if (organization === input) {
        out.unshift(input);
    }else{
        out.push(input);
    } 
  })

return out;
}});

没有测试它，但如果没有编辑它可能无效。

如何使用angularjs将下拉列表的选定值移动到第一个位置？

2 个答案: