为网格

为网格

关注
发信
关注(28)粉丝(399)

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

在这里，我创建了用于自动完成的示例，该示例工作正常，我需要对此进行一些修改。

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

但是我真正需要的是我需要将下拉列表显示为网格 View 。像这样
javascript - 如何在angularJS中将自动完成下拉列表作为网格？-LMLPHP

任何人都可以帮忙吗？
谢谢

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 for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">之外，您还将在表头上设置ng-if以仅在match.model.initial为true时显示。

只要数据集中的每个人都具有与该集中的所有其他人具有相同值的通用属性，并且您可以将该属性分组，则此方法将起作用。

[请注意，该过滤器使用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/

10-09 13:14
Powered by LMLPHP ©2024 为网格 0.029844