web-dev-qa-db-ja.com

AngularJS-ng-repeat内のselectにデフォルト値を設定します

AngularJSの問題に直面しています-選択した値を<select>に表示できません。

私のユースケースは次のとおりです。

コンポーネントを表示するためにng-repeatで始まるビューがあります。各コンポーネントには、付加価値税を選択するための選択が含まれています。新しいアイテムを作成するとき、それはうまく見えます。しかし、既存のアイテムを編集している場合、実際のvatRateコードは選択に表示されず、代わりに、選択したVATではなくデフォルトオプション「-Select VAT Rate-」が表示されます。

私のモデルには、付加価値税のIDのみが含まれています。

単一のコンポーネントを使用して、$ scopeの変数を使用して現在のアイテム値を設定できますが、ここでは複数のコンポーネントを使用できます。各コンポーネントには独自の付加価値税があります。

ここに私のコードがあります

<div ng-repeat="i in items">
   <label>{{i.id}}</label>
   <input ng-model="i.title">
   <select ng-model="i.vatRateId">
      <option value="">--- Select an option ---</option>
      <option ng-repeat="value in vatRates"
              ng-selected="i.vatRateId == value.id"
              value="{{value.id}}">{{value.value}}     
      </option>
   </select>
</div>

そしてオブジェクト：

$scope.vatRates = [
    { 'id': 1, 'value' : '20' },
    { 'id': 2, 'value' : '10' },
    { 'id': 3, 'value' : '7' }
];

$scope.items = [
    { 'id': 1, 'title' : 'Title1', 'vatRateId' : '1' },
    { 'id': 2, 'title' : 'Title2', 'vatRateId' : '2' },
    { 'id': 3, 'title' : 'Title3', 'vatRateId' : '3' }
];

ここに私の問題を説明するライブデモがあります：

PLNKRのデモ

正しい値を選択して各項目に設定することはできません。

javascriptangularjsselectangularjs-ng-repeat
12
Pat

要件についてはあまり明確ではありませんが、<select>にデフォルトの選択値を表示する場合は、ng-selectedを使用できます。それを使用するには、コントローラでdefault選択値を<select>へのmodelとして持つ必要があります。 <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">にng-selectedを追加します

コードとリファレンスについては、プランカーを変更しただけです。

http://embed.plnkr.co/ZXo8n0jE8r3LsgdhR0QP/preview

お役に立てれば。

27
Alhuck A

Ng-initの代わりにコントローラー経由でng-modelにデフォルト値を設定する必要があります。 docs から

NgInitの唯一の適切な使用は、以下のデモに見られるように、ngRepeatの特別なプロパティをエイリアスするためです。この場合のほかに、ngInitではなくコントローラーを使用して、スコープの値を初期化する必要があります。

— AngularJS ng-initディレクティブAPIリファレンス-概要

angular.module('app', [])
.controller('SelectController', function() {

    var selectCtrl = this;
  selectCtrl.values = ["Value 1", "Value 2", "Value 3"];
  selectCtrl.selectedValue = "Value 1";
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SelectController as selectCtrl">
<select ng-model="selectCtrl.selectedValue"> 
  <option ng-repeat="value in selectCtrl.values" value="{{value}}">{{value}}     </option> 
  </select>
</div>
9
kachhalimbu
<select ng-model="val" ng-init="myval = vals[0]">
    <option ng-repeat="myval in vals" value="{{myval.value}}">{{val.name}}
    </option>
</select>
2
Adam Michalski

これは私がそれを行うことができた唯一の方法であり、別の選択が変更されたときに行われます。 （たぶん、他の解決策が機能しない原因です。余分な "" +に注意してください。

コントローラー内：

$scope.formData.number_of_persons = "̲"̲+̲ $scope.numberOfPersons[0].val;

HTML：

<select name="number_of_persons" 
        id="number_of_persons" 
        ng-model="formData.number_of_persons" 
        required>
    <option ng-repeat="option in numberOfPersons" value="{{option.val}}">
        {{option.val}}
    </option>
</select>
2
Chris