Фильтр по выбору опции

Question

Я разрабатываю простые ионные приложения, у которых есть таблица, показывающая модели мобильных телефонов, и у меня есть выпадающий список, чтобы отфильтровать таблицу в соответствии с выбранной опцией. Я сделал это так, но я не понимаю, почему я не работаю ,

<div class="list list-inset"> 
     <label class="item item-input"> 
      <i class="icon ion-search placeholder-icon"> 
      </i> 
      <input ng-model="searchValue" placeholder="Search" type="text"> 
      </input> 
     </label> 
     <label class="item item-input item-select"> 
      <div class="input-label"> 
       brand 
      </div> 
      <select ng-model="chosenBrand"> 
       <option> 
        Nokia 
       </option> 
       <option selected=""> 
        Samsung 
       </option> 
       <option> 
        Apple 
       </option> 
       <option> 
        Sony 
       </option> 
      </select> 
     </label> 
    </div> 
    <div class="row header"> 
     <div class="col table-colmun"> 
      <h5> 
       Brand 
      </h5> 
     </div> 
     <div class="col table-colmun"> 
      <h5> 
       Model 
      </h5> 
     </div> 
     <div class="col table-colmun"> 
      <h5> 
       Year 
      </h5> 
     </div> 
    </div> 
    <div class="row" ng-repeat="mobile in mobilesArray |filter:chosenBrand" ng-click="selectItem(mobile, $index)" ng-class="{'selected':$index == selectedRow}"> 
     <div class="col table-colmun"> 
      {{mobile.brand}} 
     </div> 
     <div class="col table-colmun"> 
      {{mobile.model}} 
     </div> 
     <div class="col table-colmun"> 
      {{mobile.year}} 
     </div> 
    </div> 

, когда я выбираю вариант это дает мне пустую таблицу с данными теперь на всех, однако, когда я пишу {{}} chosenBrand в представлении он показывает выбранный вариант.

Answer 1

Как правильно указано, вам нужно иметь значение для параметров.

Также вместо ручного использования этих параметров вы можете использовать директиву ng-options.

как этот <select ng-options="brand.brandName for brand in brands" ng-model="chosenBrand"></select>

с массивом брендов, как

[ 
    {brandId:1,brandName:'Nokia'}, 
    {brandId:2,brandName:'Apple'}, 
    {brandId:3,brandName:'Samsung'}, 
    {brandId:4,brandName:'Sony'},  
] 

--- EDIT --- Так при использовании нг-вариантов, если вы fon't использовать в качестве опции есть значения 1,2,3 и так далее. вместо того, чтобы использовать эту

<select ng-options="brand.brandName as brand.brandName for brand in brands" ng-model="chosenBrand"></select>

Проверить out this fiddle