8

angularで検索エンジンインターフェースを実行しようとしています。ユーザーがフォームでいくつかのパラメーターを選択し、[検索] をクリックすると、URL にパラメーターが入力されます。$location.search()

フォームの作成に使用される検索インターフェースのパラメーター:

params = {
    milestones: [ "a", "b", "c", "d", etc. ], 
    properties: [ 
        { "name": "name A", type: "text" }, 
        { "name": "name B", type: "checkbox" }, 
        { etc. }
    ]
}

コントローラー内：

$scope.query = $location.search();  // get the parameters from the url  
$scope.search = function (query) {  // set the parameters to the url
    $location.search(query);    
};

およびフォームのhtml

<select ng-model="query.milestone_name" ng-options="ms for ms in params.milestones">
    <option value="">-select milestone-</option>
</select>
<select ng-model="property" ng-options="prop.name for prop in params.properties" ng-change="query.property_name=property.name">
<!-- if the object 'property' was passed in the url, it would look like this `%5Bobject%20Object%5D`, so its 'name' parameter is converted to a string -->
    <option value="">-select property-</option>
</select>
<span ng-switch="property.type">
    <label ng-switch-when="text">{{query.property_name}}: <input type="text" ng-model="query.property_value"></label>
    <label ng-switch-when="checkbox">{{query.property_name}}: <input type="checkbox" ng-model="query.property_value"></label>
</span>
<button ng-click="search(query)">search</button>

ページの別の場所に結果のリストがあります。

ユーザーは、次のような URL で検索結果ページにアクセスすることもできます。

http://myapp.com/search?milestone_name=a&property_name=name%20A

ほとんどすべてが正常に動作します。結果のリストが表示され、「milestone」パラメーターがコンポーネントの正しい値で事前に選択されますがselect、「property」パラメーターは文字列ではなくオブジェクトであるため、そうではありません。

select コンポーネントのデフォルト値 (ng-model) をオブジェクトに設定するにはどうすればよいですか?

または、これをどのように行うべきかについての他のアイデアはありますか?

4

4 に答える 4

27

select の反復処理にオブジェクトの配列を使用する場合、ng-optionsディレクティブには、照合する (および配列を区別する) オブジェクトの属性が必要です。

track byディレクティブ宣言のセクションを使用します。

<select ng-model="property" ng-options="prop.name for prop in params.properties track by prop.name" ng-change="query.property_name=property.name">
<!-- if the object 'property' was passed in the url, it would look like this `%5Bobject%20Object%5D`, so its 'name' parameter is converted to a string -->
    <option value="">-select property-</option>
</select>
于 2014-01-21T09:45:08.910 に答える
0

ng-optionsで使用するいくつかのオプションを生成していますng-model。構文 ( prop.name for prop in params.properties) では、配列内で見つかったオブジェクトにバインドするように指示し (そのオブジェクトのプロパティとは対照的に、これが目的です)、その name プロパティを表示する値として使用します。したがって、を配列ng-modelにないオブジェクトに設定しようとしても、ng-options何も起こりません。参照/浅い等価性を使用していて、深い等価性を使用していないためだと思います。したがって、次のいずれかを行う必要があります。

  • ng-optionsオブジェクトを文字列の配列に変換します。

  • 次のようなキーを含む構文を使用します。

prop.name as prop.name for prop in params.properties

http://jsfiddle.net/C5ENK/

それがお客様のニーズに合わない場合は、その理由をお知らせください。さらにサポートできるかどうかを確認いたします。

于 2013-09-02T01:37:40.600 に答える