値からAngularドロップダウンリストからIDを取得するには？

コードでわかるように、私はcar A、B、およびCのリストにavailableCarsリストに対応するidを持っています。私は既にサービスから選んだ車を得ている。それは車の名前だけのオブジェクトではありません。ユーザーは別の車を選択するオプションがありますが、変更された場合、別のサービスに車のIDを送信する必要があります。私の目標を達成する最も簡単な方法はありますか？値からAngularドロップダウンリストからIDを取得するには？

(function(angular) { 
 
    'use strict'; 
 
angular.module('ngrepeatSelect', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    
 
    $scope.carName = (function getCarNameFromService(){ 
 
     return 'Car B'; 
 
    })(); 
 
    
 
    $scope.availableCars = [ 
 
     {id: '1A', name: 'Car A'}, 
 
     {id: '2B', name: 'Car B'}, 
 
     {id: '3C', name: 'Car C'} 
 
    ] 
 
}]); 
 
})(window.angular);

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-ngrepeat-select-production</title> 
 
    
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
    
 

 
    
 
</head> 
 
<body ng-app="ngrepeatSelect"> 
 
    <div ng-controller="ExampleController"> 
 
    <form name="myForm"> 
 
    <label for="repeatSelect"> Repeat select: </label> 
 
    <select name="repeatSelect" id="repeatSelect" ng-model="carName"> 
 
     <option ng-repeat="option in availableCars" value="{{option.name}}">{{option.name}}</option> 
 
    </select> 
 
    </form> 
 
    <hr> 
 
    <tt>selected car name = {{carName}}</tt><br/> 
 
    <tt>selected car id = ???</tt><br/> 
 
</div> 
 
</body> 
 
</html>

出典

2016-05-10 Ben Tennyson

よりもむしろ、 "オプション" の要素にNGリピートを使用して選択の内側には、 "NG-オプション" を使用することができます。 ng-options

あなたの例を示すためにplnkrを作成しました。次のようにコードの主要部分のいくつかは、次のとおりです。

var carName = "Car B"; //name provided to this controller 

    $scope.availableCars = [ 
     {id: '1A', name: 'Car A'}, 
     {id: '2B', name: 'Car B'}, 
     {id: '3C', name: 'Car C'} 
    ] 

    $scope.selectedCar = $scope.availableCars.filter(function(car){ 
     return car.name === carName; 
    })[0]; 

    $scope.selectedId = $scope.selectedCar.id; 

    $scope.updateCar = function(id){ 
     $scope.selectedId = id; 
    }

と

HTML

<form name="myForm"> 
    <label for="repeatSelect"> Repeat select: </label> 
    <select ng-options="car as car.name for car in availableCars" ng-model="selectedCar" ng-change="updateCar(selectedCar.id)"></select> 
    </form>

お知らせ "NG-変更" と " ng-options "をHTMLに追加します。実際

<select ng-change="sendInfo(...)" ...> 
... 
</select>

、私は希望：

出典

2016-05-11 00:01:52 sourdoughdetzel

問題は、モデル "selectedCar"はオブジェクトではありません。私はちょうど名前（この場合は "車B"）を持っています。また、ドロップダウンには名前が必要です。どのように私はそれをこの状況で動作させることができますか？お返事をありがとうございます。 –

私はなぜselectedCarがオブジェクトになれないのか分かりません（名前を入力として取得している場合や、使用可能な車のリスト内のオブジェクトと一致して正しいものを取得できる場合）。特定の理由はありますか？私はそれを使いこなし、あなたに戻ってきますが、ng-optionsで可能ならば、それは洗練されたソリューションになるとは思えません。 – sourdoughdetzel

あなたが求めていることを行うようにプランカーを更新しましたが、フルカーオブジェクトをドロップダウンのドライバーとして使用し続けます（提供された名前に基づいてデフォルトカーを検索して最初に設定します）。それがあなたがやろうとしていることに対してうまくいかないかどうか私に教えてください！ – sourdoughdetzel

ユーザーはなく、変化に、私はあなたがそのためにng-changeを使用することができ、他のサービス

に車のIDを送信する必要が異なる車を選択するオプションを持っています車の名前の代わりに車のIDをモデルにバインドするように助言してください。またはng-optionsに切り替えると、車のオブジェクト。あなたが選択したIDを送ることができるようにその方法。

出典

2016-05-11 00:11:12

値からAngularドロップダウンリストからIDを取得するには？

答えて

関連する問題