web-dev-qa-db-ja.com

AngularJSドロップダウンに選択した値が表示されない

選択した値をangularドロップダウンに表示する際に問題に直面しています。このように指定すると、機能します

$scope.selectedItem = $scope.items[1];

その値を直接与えると、機能しません

$scope.selectedItem = { name: 'two', age: 27 };

[〜＃〜] html [〜＃〜]：

<html ng-app="app">
  <body>
    <div ng-controller="Test">
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
    </div>
  </body>
</html>

[〜＃〜] js [〜＃〜]：

var app = angular.module('app',[]);
app.controller('Test',function($scope){
   $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
  $scope.selectedItem = $scope.items[1];
});

CODEPEN：http://codepen.io/anon/pen/zxXpmR

解決策：

Samir-dasありがとうございます。私はあなたの提案に従って修正しました。

var choosen_value = { name: 'two', age: 27 };
angular.forEach($scope.items, function(item){
  if(angular.equals(choosen_value, item)){
    $scope.selectedItem = item;
  }
});
javascriptarraysjsonangularjsng-options
9
Raj Adroit

まあ、なぜなら

$scope.items[1]と{ name: 'two', age: 27 }はまったく別物です。

{ name: 'two', age: 27 }はまったく異なるオブジェクトですが、$scope.items[1]はオブジェクトの一部です$scope.items

{{}}を使用してテンプレートに何かを配置する場合、angularウォッチャーリストに追加します。

したがって、angularウォッチリストに入れると、それは{ name: 'two', age: 27 }とは異なるオブジェクト（つまり、$scope.items）でした。

selectedItemは、コントローラーで設定したオブジェクトに添付されます。要約すると、ダーティチェック中にangular selectedItemを{ name: 'two', age: 27 }に対してチェックします。$scope.itemsに対してではありません

私が何を意味するのか理解していただければ幸いです

6
Samir

他の回答で説明されているように、2つのオブジェクトは同じプロパティと値を持っている場合がありますが、それらは2つの異なるオブジェクトであるため、angularはそれらが等しいとは見なしません。

ただし、 ng-options のtrack by式を使用して、同等性を決定するプロパティを指定できます。

ng-options="item.name for item in items track by item.name"

http://codepen.io/anon/pen/WbWMrp

6
noj

これはnota Angular機能/問題です。これは、Javascriptでオブジェクトの同等性がどのように機能するかの結果です。- この記事 何が起こっているのかをかなり簡潔に説明し、いくつかの例を示します。 lodashのisEqualメソッド のソースを確認してください（最終的にはbaseIsEqualDeepの定義）、達成しようとしていることを純粋なJSでどのように実行できるかを確認します。

いずれにせよ、Angularでこれを実現する簡単な方法はないと思います。方法を書き直す必要がありますng-options動作し、おそらくそこに行きたくないでしょう...

1
Tadeáš Peták

角度では、配列とオブジェクトは参照によって渡され、文字列、数値、ブール値は値によって渡されます。したがって、angular $scope.items[1]と{ name: 'two', age: 27 }を2つの異なるオブジェクトとして解釈します。そのため、$scope.selectedItem = { name: 'two', age: 27 };を直接実行して '$ scopeで見つけると、バインディングが失敗します。 .items '。

1
Himanshu Mittal