У меня есть данные в выпадающем списке, как:Угловая Js Фильтрация данных в выпадающий
[{Item:'1'},{Item:'2'},{Item:'3'},{Item:'4'},{Item5:'5'}]
Мне нужно создать 7 выпадающих списков. (Это исправлено).
Первый выпадающий список должен содержать только Item1, второй должен содержать только Item2 и не все варианты.
Как это можно сделать в Угловом?
var notebooks = angular.module('notebooks', []);
notebooks.controller('NotebookListCtrl', function($scope) {
$scope.notebooks = [
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008}
];
$scope.orderList = "name";
});html, body {
height: 100%;
}
body {
font-family: helvetica;
font-weight: 100;
font-size: 14px;
margin: 0 auto;
background: #FFFFBB;
}
.right {
float: right;
position: relative;
top: 6px;
}
.top {
margin-top: -30px;
}
#notebooks {
background: whitesmoke;
position: absolute;
left: 50%;
margin-left: -175px;
margin-top: 35px;
width: 350px;
padding: 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
box-shadow: inset 1px 1px 0 white;
max-height: 450px;
}
ul {
margin: 0 auto;
padding: 0;
max-height: 390px;
overflow-y: auto;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 5px 5px 0 5px;
border-left: none;
border-right: none;
}
li {
list-style: none;
background-color: rgba(0, 0, 0, 0.05);
background-image:
linear-gradient(
90deg,
#FFD32E 10px,
#EEE 10px,
#EEE 11px,
transparent 11px);
padding: 10px 15px 10px 25px;
border: 1px solid #CCC;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
margin-bottom: 5px;
width: 100%;
box-sizing: border-box;
cursor: pointer;
border-radius: 3px;
}
#query {
width: 100%;
box-sizing: border-box;
font-size: 19px;
padding: 5px;
font-family: calibri light;
margin-bottom: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
#notebooks span {
display: block;
position: absolute;
background: #FFD32E;
bottom: -35px;
left: -1px;
width: 360px;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
}
#notebooks select {
width: 120px;
margin-left: 230px;
margin-top: -45px;
border-radius: 0 3px 3px 0;
border: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(0, 0, 0, 0.1);
position: absolute;
padding: 7.5px;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}
#notebooks select:focus, #query:focus {
border: 1px solid #FFD32E;
box-shadow: 0 0 10px rgba(255, 255, 0, 0.1);
outline: none;
}<div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl">
<input type="text" id="query" ng-model="query"/>
<select ng-model="orderList">
<option value="name">By name</option>
<option value="-age">Newest</option>
<option value="age">Oldest</option>
</select>
<ul id="notebook_ul">
<li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
name: {{notebook.name}}<br/>
procesor: {{notebook.procesor}}<br/>
<div class="right top">{{notebook.age}}</div>
</li>
</ul>
<span>Number of notebooks: {{notebooks.length}}</span>
</div>Попробуйте это, пожалуйста, добавьте также угловую функциональность! – V5NXT
Не после, звучит, как вы пытаетесь создать 7 Выберите падение падения, каждый из которых с одним единственным значением опции «х». это ваш json больше как [{"name": "item1", "options": ["a", "b", "c"]}, {"name": "item2", "options": ["x », "у", "г"]}]. Какой-то образец кода или скрипка были бы полезны – sasonic
У меня есть данные как [Item1, Item2, Item3, Item4, Item5, Item6]. Кроме того, мне нужно создать 7 меню drop dowm. Первый снимок должен содержать только Item1, второй должен иметь только item2. 7-й выпадающий список должен содержать только '-'. Если мои данные перезагружены с 5 элементами, то 6-е и 7-е выпадающее меню должно содержать. Thsi si requriment. – user2773529