Question

这里我创建了自动完成的示例，它工作正常，我需要对此进行一些修改。目前它的工作方式如下

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

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

＆＃13;

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;
    };
  });

＆＃13;

 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;  }

＆＃13;

<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>

＆＃13;

Answer 1

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

更新：this previous SO answer中的陪审团操作解决方案是注入angular的filterFilter，而不是使用$scope.sample_data作为您的集合重复，而是创建一个预过滤的组在$ viewValue上。为了将数据集中的所有人员组合在一起，我向每个人添加了公司属性（在此处做出假设）。然后，您可以在筛选数据集的第一个元素上设置指标属性（在本例中为initial = true）。

最后，在您的模板中，除了将typeahead属性值更改为suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">之外，您还会在表头上设置ng-if，以便仅显示“匹配”。 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>

Answer 2

agGrid.initialiseAgGridWithAngular1(angular);
 function showGrid(val)
		{
			console.log(val.length)
			if(val.length <3){
 				document.getElementById('myGrid').style.display='none'
			}
			else
			{
						console.log("hide count")
				document.getElementById('myGrid').style.display='block'
			}
		}
var fileBrowserModule = angular.module('basic', ['agGrid']);

fileBrowserModule.controller('basicController', function($scope) {
	
	$scope.gridheader = [
					{headerName: "Make", field: "make"},
					{headerName: "Model", field: "model"},
					{headerName: "XModel", field: "model"},
					{headerName: "Rate", field: "price"},
					{headerName: "Price", field: "price"}
				];
   $scope.rowData = [
					{make: "Toyota", model: "Celica", price: 35000},
					{make: "Ford", model: "Mondeo", price: 32000},
					{make: "Porsche", model: "Boxter", price: 72000},
					{make: "Audi", model: "Boxter", price: 92000},
					{make: "Toyota", model: "Celica", price: 35000},
					{make: "Ford", model: "Mondeo", price: 32000},
					{make: "Porsche", model: "Boxter", price: 72000},
					{make: "Audi", model: "Boxter", price: 92000}
				]; 
	
	
 

    $scope.gridOptions = {
        columnDefs: $scope.gridheader,
        rowData: $scope.rowData,
		onSelectionChanged: onSelectionChanged,
        rowSelection: 'single',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        groupHeaders: true,
        rowHeight: 22,
        onModelUpdated: onModelUpdated,
        suppressRowClickSelection: false
		

    };

    function onModelUpdated() {
         var model = $scope.gridOptions.api.getModel();
         var totalRows = $scope.gridOptions.rowData.length;
         var processedRows = model.getVirtualRowCount();
		     $scope.rowCount = processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString();
    }
	
	function onSelectionChanged() {
 	var selectedRows = $scope.gridOptions.api.getSelectedRows();
     var selectedRowsString = '';
    selectedRows.forEach( function(selectedRow, index) {
        if (index!=0) {
            selectedRowsString += ', ';
        }
        selectedRowsString += selectedRow.make;
    });
	$scope.gridOptions.quickFilterText = selectedRowsString;
    document.querySelector('#selectedRows').innerHTML = selectedRowsString;
	document.getElementById('myGrid').style.display='none'
}

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    
});

 

});

<script src="https://www.ag-grid.com/dist/ag-grid.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
 
</head>

<body ng-app="basic">

    <div ng-controller="basicController" style="width: 800px;">
        <div style="padding: 4px">
            <div style="float: left;">
                <p>type audi or toyota</p><input type="text" ng-model="gridOptions.quickFilterText"   onKeyPress="return showGrid(this.value)"   placeholder="Type text to filter..."/>
            </div>
            <div style="padding: 4px;">
                    <span id="selectedRows">
    </span>
 ({{rowCount}})
            </div>
            <div style="clear: both;"/>
        </div>
        <!--<grid-Wrapper get-header="gridheader" get-data="rowData" enable-Filter="{{true}}" enable-Sorting="{{true}}" enable-Col-Resize="{{true}}"></grid-Wrapper>-->
        
         <div id="myGrid" style="width: 100%; height: 400px; display:none"
             ag-grid="gridOptions"
             class="ag-fresh ag-basic"  >
        </div> 
    </div>

</body>
</html>

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

2 个答案: