Angularjs и выберите значение по умолчанию

Question

У меня есть этот HTML код (нет, я не могу преобразовать его в течение нг-вариантов):

<form> 
     <div class="list"> 
      <div style="margin-bottom: 20px;"> 
       <label class="item item-input item-select"> 
        <div class="input-label"> 
         Price From (start) 
        </div> 
        <select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'"> 
         <option value=0>All</option> 
         <option value="100">100</option> 
         <option value="200">200</option> 
         <option value="500">500</option> 
         <option value="700">700</option> 
         <option value="1000">1000</option> 
         <option value="1500">1500</option> 
         <option value="2000">2000+</option> 
        </select> 
       </label> 
      </div> 

      <div> 
       <label class="item item-input item-select"> 
        <div class="input-label"> 
         Vacation Days (start) 
        </div> 
        <select required ng-model="search.vacationDays"> 
         <option value=0 >All</option> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
         <option value="10">10+</option> 
        </select> 
       </label> 
      </div> 
     </div> 
      </form> 

Я хочу это: в первый раз, когда я вижу эту страницу в значения обоих select должны быть «All» (значение = 0), и я думаю, что мне нужно только добавить «обязательный», но он не работает.

И для каждого следующего значения значение по умолчанию должно быть значением внутри searchParams.priceFrom (это переменная в моей области $).

Где моя ошибка?

Спасибо.

М.

Answer 1

Поскольку оба выбирает привязаны к вашему search.vacationDays & & search.priceFrom все, что вам нужно будет сделать в вашем контроллере что-то вроде:

$scope.search.priceFrom = 0; 
$scope.search.vacationDatys = 0; 

Answer 2

Пожалуйста, смотрите демо ниже

просто установите ваш serach obj в контроллере

$scope.search = {  
    priceFrom: 0, 
    vacationDays: 0 

    } 

var app = angular.module('app', []); 
 

 
app.controller('fCtrl', function($scope) { 
 

 
    $scope.search = { 
 

 
    priceFrom: 0, 
 
    vacationDays: 0 
 

 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="fCtrl"> 
 

 
    <form> 
 
     <div class="list"> 
 
     <div style="margin-bottom: 20px;"> 
 
      <label class="item item-input item-select"> 
 
      <div class="input-label"> 
 
       Price From (start) 
 
      </div> 
 
      <select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'"> 
 
       <option value=0>All</option> 
 
       <option value="100">100</option> 
 
       <option value="200">200</option> 
 
       <option value="500">500</option> 
 
       <option value="700">700</option> 
 
       <option value="1000">1000</option> 
 
       <option value="1500">1500</option> 
 
       <option value="2000">2000+</option> 
 
      </select> 
 
      </label> 
 
     </div> 
 

 
     <div> 
 
      <label class="item item-input item-select"> 
 
      <div class="input-label"> 
 
       Vacation Days (start) 
 
      </div> 
 
      <select required ng-model="search.vacationDays"> 
 
       <option value=0>All</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
       <option value="4">4</option> 
 
       <option value="5">5</option> 
 
       <option value="6">6</option> 
 
       <option value="7">7</option> 
 
       <option value="8">8</option> 
 
       <option value="9">9</option> 
 
       <option value="10">10+</option> 
 
      </select> 
 
      </label> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>