web-dev-qa-db-ja.com

ng-optionsの値とラベルをng-modelにバインドします

ng-optionsを使用して、オプションが場所である選択タグを生成しています。ラベルはロケーション名であり、値は（データベース内の）ロケーションIDです。

値（場所ID）をng-model属性にバインドしましたが、ラベル（場所名）を別のng-model属性にもバインドしたいと思います。 （これはこの特定の属性を期待するサーバーにPOSTされるため、idフィールドを分離する必要があります。）Angularでこれを行うための最良の方法は何ですか？

私のコード：

<div ng-app="app"><div ng-controller="edit">
  <select ng-model="purchase.pickUpLocationId" ng-options="loc.id as loc.name for loc in purchase.availableLocations"></select>

  <!-- This is the model not yet bound: -->
  <p>You have selected {{ purchase.pickUpLocationName }}</p>

</div></div>

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

app.controller('edit', ['$scope', function($scope) {
    $scope.purchase = {
        pickUpLocationId: 30,
        availableLocations: [
            {id: 20, name: "Charleston, SC"},
            {id: 30, name: "Atlanta, GA"},
            {id: 40, name: "Richmond, VA"},
        ]
    };
}]);
javascripthtmlangularjsangular-ngmodelng-options
7
eirikir

次のように変更して、オブジェクト全体にバインドできます。後でidにアクセスして、やりたいことが何でもできます。

<select ng-model="selected" ng-options="loc as loc.name for loc in purchase.availableLocations"></select>

<p>You have selected {{ selected.name }}</p>
<p>You havd id too! {{ selected.id }}</p>

JSFiddleリンク

9
scniro

私の提案は、最初にハッシュとしてモデル化することです

{
   "20": "Charleston, SC",
   "30": "Atlanta, GA"
}

次に、{{availableLocations[purchase.pickUpLocationId]}}を使用します

ng-optionsを次のように作成します

<select ng-model="purchase.pickUpLocationId" ng-options="id as label for (id, label) in purchase.availableLocations"></select>
3
Nikhil Baliga

更新されたscniroの回答

<div ng-app="app">
<div ng-controller="ctrl">
     <select ng-model="selected" ng-options="opt as opt.language for opt in tableResult.locales"></select>        
     <p>You have selected {{ selected.language }}</p>
     <p>You havd id too! {{ selected.localeId }}</p>
     <p>
     </p>
     <input type="text" value="{{selected.localeId}} : {{selected.language}}" style="width:50%;"/>

</div>

JSFIDDLE-オプションの値とラベルをバインド

0
Surya R Praveen