Angularjs并选择默认值

时间:2014-10-24 00:44:40

标签: angularjs

我有这个HTML代码(不,我不能在ng-options中转换它):

<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),我认为我只需要添加“required”但它没有用。

对于下一次,默认值必须是searchParams.priceFrom中的值(它是我的$ scope中的变量)。

我的错误在哪里?

感谢。

微米。

2 个答案:

答案 0 :(得分:0)

由于两个选项都绑定到search.vacationDays&amp;&amp; search.priceFrom您需要在控制器中执行以下操作:

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

答案 1 :(得分:0)

请参阅下面的演示

只需在控制器中设置你的serach obj

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

  }

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

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

  $scope.search = {

    priceFrom: 0,
    vacationDays: 0


  }

});
&#13;
<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>
&#13;
&#13;
&#13;