Question

我在下拉列表中有数据：

[{Item:'1'},{Item:'2'},{Item:'3'},{Item:'4'},{Item5:'5'}]

我需要创建7个下拉列表。（这是固定的）。

第一个下拉列表应仅包含Item1，第二个下拉列表应仅包含Item2，而不是所有选项。

如何在Angular中完成？

Answer 1

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>

Angular Js在下拉列表中过滤数据

1 个答案: