適切 - 優秀な図書館

私はこのNG-select要素があります。ここでは適切

<body ng-controller="MainCtrl"> 
    <select ng-model="selectedItem" ng-model="selectedItem"> 
     <option value="-1" selected>- manual -</option> 
     <option ng-repeat="(key, value) in items">{{value.Name}}</option> 
    </select> 
    </body>

はコントローラである：ここでは

$scope.selectedItem = null; 
    $scope.items = [{Name: 'one', Id: 30 }, 
        {Name: 'two', Id: 27 }, 
        {Name: 'threex', Id: 50 }];

はPLUNKERに取り組んでいます。

ng-selectの内部には、static（-manual - ）とng-repeat要素で生成されるオプションの2つのオプションがあります。

私の問題がある：私は選択した要素のIdを設定する必要がありながら、ユーザはNG-繰り返し $scop.selectedItemをによって生成されたオプションの選択を行う際には、選択した項目のNameを取得します。例えば

：

、私が選択した項目の27Idを取得する$scop.selectedItemを必要としながらtwo$scop.selectedItemは、アイテムのtwo名前を取得しますNG-select要素から選択したユーザ上記plunkerでいる場合。

$scop.selectedItemどのようにすれば選択項目のIdを得ることができますか？

出典

2016-10-20 Michael

また、あなたの問題とは関係なく、実際にプロパティを大文字にするべきではありません。大文字の名前はクラス用に予約する必要があります。 – Pjetr

答えの1つはあなたの問題を解決しましたか？ :) – Mistalis

ng-optionsディレクティブをご覧ください。式のようなリストの理解を渡して、必要なものを抽出することができます。例えば

：

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

https://docs.angularjs.org/api/ng/directive/ngOptions

出典

2016-10-20 14:24:15 Delapouite

'as 'と' track by'を一緒に使用するとバインディングが壊れる可能性があります。 –

DelapouiteあなたはNG-オプションを使用する必要があり、言ったように。これを実装するためにplunkrを更新しました。

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

 
app.controller('MainCtrl', function($scope) { 
 
    
 
    $scope.items = [{name: '- manual -', id: -1 }, 
 
        {name: 'one', id: 30 }, 
 
        {name: 'two', id: 27 }, 
 
        {name: 'threex', id: 50 }]; 
 
    $scope.selectedItem = $scope.items[0]; 
 
    
 
});

<select 
 
     ng-model="selectedItem" 
 
     ng-options="item.name for item in items track by item.id" 
 
    ></select>

出典

2016-10-20 14:29:34 Pjetr

私が行っていることすべてが、私は、キーと値= {{value.Id}}を設定しているとのSelectedItemがそれを拾うあるこの

<option ng-repeat="(key, value) in items" key="{{value.Id}}" value="{{value.Id}}">{{value.Name}}</option>

を試してみてください。

ここUPDATED PLNKR

出典

2016-10-20 14:29:41 sisyphus

は、私がng-optionsを使用すると$scope.itemsであなたのデフォルト値（マニュアル）をプッシュすることをお勧めします。

ng-initを使用して、選択のデフォルト値を - manual - に設定しました。ここで

<body ng-controller="MainCtrl"> 
    <select ng-model="selectedItem" ng-options="i.Id as i.Name for i in items" ng-init="selectedItem = items[0].Id"></select> 
    selected item: {{selectedItem}} 
</body>

$scope.items = [{Name:'- manual -', Id: -1}, 
       {Name: 'one', Id: 30 }, 
       {Name: 'two', Id: 27 }, 
       {Name: 'threex', Id: 50 }];

はworking Plnkrです。

出典

2016-10-20 14:34:18 Mistalis

適切

答えて

関連する問題