javascript - 如何在angularJS中将自动完成下拉列表作为网格？

coder 2024-05-14 原文

我在这里为自动完成创建了示例，它工作正常，我需要对此做一些修改。目前它是这样工作的

但我真正需要的是我需要将下拉列表显示为 GridView 。有些像这样

有人可以帮忙吗？... 谢谢

var app = angular.module('app', ['ui.bootstrap']);

  app.controller('TypeaheadCtrl', function ($scope, $http, limitToFilter, filterFilter) {

 
    $scope.sample_data = [{
         "name": "Nelson",
         "designation":"Senior Developer",
         "company": "acme",
         "companydisplay": "abc"
       },
       {
        "name": "suresh",
        "designation":"Developer",
        "company": "acme",
        "companydisplay": "def"
       },
       {
        "name": "Naresh",
        "designation":"Developer",
        "company": "acme",
        "companydisplay": "xyz"
       }];

    $scope.filtered_sample_data = function (search) {
      var filtered = filterFilter($scope.sample_data, search);
     
      var results = _(filtered)
        .groupBy('company')
        .map(function (g) {
          g[0].initial = true;  // the first item in each group
          return g;
        })
        .flatten()
        .value();
      return results;
    };
  });

 body {
    font-family:'Trebuchet MS', Verdana, sans-serif;
    margin:20px 0px;
    padding:0px;
    text-align:center;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    cursor:pointer;
}
label {
    cursor:default;
    margin:0;
}
.form {
    width:400px;
    margin:0px auto;
    text-align:left;
    background:#F2F1F0;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
    border:1px solid #474641;
}
.formHeader {
    background:#474641;
    color:#ddd;
    padding:4px;
    font-weight:600;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
}
.formBody {
    padding:10px;
}
.data {
    margin:0px auto;
    text-align:left;
}
.dropdown-menu {
    text-align:left;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th{
    background-color: #29ABE2;
    color: white;  
}
tr> td {
    text-align: left;
}
th, td {
    padding: 15px;

}
tbody>tr:hover {
  background-color: #0088cc;
  color: white;
}

.headerSortUp {
    background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
}
.headerSortDown {
    background: url(data:image/gif;
    base64, R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) no-repeat 99%;
}
 
.suggestion-name { min-width: 100px; }
.suggestion-designation { min-width: 100px;  } 
.suggestion-company { min-width: 100px;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>

 

<div ng-app="app">
    <div class='container-fluid' ng-controller="TypeaheadCtrl">
        <!-- <pre>Model: {{result | json}}</pre>
        <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
--> <pre>Model: {{monkey | json}}</pre>

        <input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">

    </div>
    <!-- CACHE FILE: columnTwo.html -->
    <script type="text/ng-template" id="columnTwo.html">
        <table class="">
          <thead ng-if="match.model.initial">
            <tr>
              <th>Name</th>
              <th>Designation</th>
              <th>Company</th>
            </tr>
          </thead>
        <tr>
      <td class="suggestion-name">
        <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
          <a>{{ match.model.name }} </a>
        </div>
      </td>
      <td class="suggestion-designation"> {{ match.model.designation }} </td>
      <td class="suggestion-company"> {{ match.model.companydisplay }} </td>
      </tr>
      </table>
    </script>

最佳答案

正如我评论的那样，由于模板针对示例数据集中的每个 suggestion.name 重复，因此它将在每个列出的名称上方包含列标题。

更新:陪审团操纵的解决方案，如 this previous SO answer 中所见, 是注入(inject) angular 的 filterFilter，而不是使用 $scope.sample_data 作为你的集合来重复，而是创建一个基于 $viewValue 的预过滤组。为了将您的数据集中的所有人分组在一起，我为每个人添加了一个公司属性(在此进行假设)。然后，您可以在过滤后的数据集中的第一个元素上设置指示器属性(在本例中为 initial = true)。

最后，在您的模板中，除了将您的 typeahead 属性值更改为 suggestion.name 以在 filtered_sample_data($viewValue) | 中提供建议之外filter: $viewValue">，您将在表头设置 ng-if 以仅在“match.model.initial”为真时显示。

只要数据集中的每个人都具有一些与集合中所有其他人具有相同值的通用属性，并且您按该属性分组，这就会起作用。

[注意过滤器使用了 lodash 的隐式链接，所以我也为 lodash.js 添加了一个脚本标签。]

解决方法归功于@runTarm。

var app = angular.module('app', ['ui.bootstrap']);

  app.controller('TypeaheadCtrl', function ($scope, $http, limitToFilter, filterFilter) {

 
    $scope.sample_data = [{
         "name": "Nelson",
         "designation":"GM",
         "company": "acme"
       },
       {
        "name": "suresh",
        "designation":"Developer",
        "company": "acme"
       },
       {
        "name": "Naresh",
        "designation":"Developer",
        "company": "acme"
       }];

    $scope.filtered_sample_data = function (search) {
      var filtered = filterFilter($scope.sample_data, search);

      var results = _(filtered)
        .groupBy('company')
        .map(function (g) {
          g[0].initial = true;  // the first item in each group
          return g;
        })
        .flatten()
        .value();
  
      return results;

    };
  });

body {
    font-family:'Trebuchet MS', Verdana, sans-serif;
    margin:20px 0px;
    padding:0px;
    text-align:center;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    cursor:pointer;
}
label {
    cursor:default;
    margin:0;
}
.form {
    width:400px;
    margin:0px auto;
    text-align:left;
    background:#F2F1F0;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
    border:1px solid #474641;
}
.formHeader {
    background:#474641;
    color:#ddd;
    padding:4px;
    font-weight:600;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
}
.formBody {
    padding:10px;
}
.data {
    margin:0px auto;
    text-align:left;
}
.dropdown-menu {
    text-align:left;
}
table, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 15px;
}
.suggestion-name { min-width: 100px; }
.suggestion-designation { min-width: 100px;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>

 

<div ng-app="app">
    <div class='container-fluid' ng-controller="TypeaheadCtrl">
        <!-- <pre>Model: {{result | json}}</pre>
        <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
--> <pre>Model: {{monkey | json}}</pre>

        <input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">

    </div>
    <!-- CACHE FILE: columnTwo.html -->
    <script type="text/ng-template" id="columnTwo.html">
        <table class="">
          <thead ng-if="match.model.initial">
            <tr>
              <th>Name</th>
              <th>Designation</th>
            </tr>
          </thead>
        <tr>
      <td class="suggestion-name">
        <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
          <a>{{ match.model.name }} </a>
        </div>
      </td>
      <td class="suggestion-designation"> {{ match.model.designation }} </td>
      </tr>
      </table>
    </script>

关于javascript - 如何在angularJS中将自动完成下拉列表作为网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34920623/

何在 javascript 34 gt lt angularjs angularjs-directive angularjs-scope angularjs-controller

有关javascript - 如何在angularJS中将自动完成下拉列表作为网格？的更多相关文章

ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 如何在 Ruby 中顺序创建 PI - 2
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
ruby-on-rails - 如何在 ruby 中使用两个参数异步运行 exe？ - 2
exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby中使用两个参数异步运行exe吗？我已经尝试过ruby命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何rubygems会支持我的问题？最佳答案您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除
ruby - 如何在续集中重新加载表模式？ - 2
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
ruby - RSpec - 使用测试替身作为 block 参数 - 2
我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere
ruby - RVM 使用列表[0] - 2
是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。最佳答案这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

javascript - 如何在angularJS中将自动完成下拉列表作为网格？

有关javascript - 如何在angularJS中将自动完成下拉列表作为网格？的更多相关文章

随机推荐