11
Tu stworzył próbkę do autouzupełniania, która pracuje bez zarzutu i muszę zrobić kilka modyfikacji na this.currently To działa takJak wykonać rozwijanie autouzupełniania jako siatkę w angularJS?
ale to, co dokładnie potrzebujesz, to muszę pokazać rozwijaną jako widok siatki. Niektórzy lubią tego
może ktoś pomóc w tej sprawie? .. dzięki
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>
Brakuje zamykający cudzysłów w swoim columnTwo.html NG-szablonu. Powinien być '
nawet jeśli tak nie działa, to nie działa prawidłowo –
Tak, ponieważ cały szablon nagłówka jest w zasadzie powtórzony dla każdej sugestii.nazwa w twoich danych, nie sądzę, że możesz umieścić nagłówek tabeli w szablonie bez powtarzania dla każde imię. Możesz oczywiście upuścić '{{match.model.designation}}' na swój własny element danych '
Odpowiedz
Jak zauważył, ponieważ szablon jest powtarzany dla każdego
suggestion.name
w przykładowym zestawie danych , będzie zawierać nagłówki kolumn nad każdą z wymienionych nazw.UPDATE: Roztwór jury uzbrojone, jak znaleźć w this previous SO answer jest wstrzykiwać kątową na filterFilter i, zamiast
$scope.sample_data
jako swojej kolekcji powtarzać przez, zamiast tworzyć wstępnie filtrowane grupę opartą na $ viewValue. Aby zgrupować wszystkie osoby w zestawie danych, dodałem do każdej z nich właściwość firmy (w tym przypadku założenie). Następnie możesz ustawić właściwość wskaźnika (w tym przypadkuinitial = true
) na pierwszym elemencie w przefiltrowanym zbiorze danych.I wreszcie, w szablonie, oprócz zmieniających swoją wartość atrybutu
typeahead
dosuggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">
, będziesz ustawićng-if
na czele tabeli, aby pokazać tylko jeśli `match.model.initial” jest prawdziwe.To będzie działać tak długo, jak każda osoba w zestawie danych ma jakąś właściwość ogólną o tej samej wartości, co wszystkie inne osoby w zestawie, i grupujesz według tej właściwości.
[Zauważ, że filtr korzysta lodash za niejawny łańcuchowym, więc dodałem tag skryptu dla lodash.js również.]
@runTarm kredyt na obejście.
Źródło
2016-01-22 05:51:05
ten jest w porządku, ale to, czego potrzebuję, to już wspomniałem na drugim obrazku –
z nagłówkiem potrzebującym –
@SureshB, teraz działa. –
Źródło
2016-02-18 13:24:12 Nelson
Powiązane problemy