web-dev-qa-db-ja.com

ng-optionsでフィルターを使用して、表示される値を変更します

0に表示したい価格の配列（0.99、1.99、<select>...など）があります。

私はAngularのng-optionsをこのように使いたい

<select ng-model="create_price" ng-options="obj for obj in prices"/>

上に表示されているように、0、0.99、1.99...の選択を生成します。

しかし、コードでフィルターを使用して、Word 'prices'（またはそのようなもの）が表示されるたびに、コードが浮動小数点数を文字列に変更して表示する関数を実行するようにします（free、0.99$、1.99$...など）。

それを行う方法はありますか？

ありがとう

angularjsfilterng-options
49
TidharPeer

より良い方法があります：

app.filter('price', function() {
  return function(num) {
    return num === 0 ? 'free' : num + '$';
  };
});

次に、次のように使用します。

<select ng-model="create_price" ng-options="obj as (obj | price) for obj in prices">
</select>

このように、フィルターは配列でのみ動作するのではなく、単一の値に役立ちます。オブジェクトと対応するフォーマットフィルターがある場合、これは非常に便利です。

必要に応じて、フィルターをコードで直接使用することもできます。

var formattedPrice = $filter('price')(num);
114
shawkinaw

次のようなカスタムフィルタを作成します。

app.filter('price', function() {
  return function(arr) {
    return arr.map(function(num){
      return num === 0 ? 'free' : num + '$';
    });
  };
});

次のように使用します：

<select ng-model="create_price" ng-options="obj for obj in prices | price">
  {{ obj }}
</select>
7
Tosh

擬似コードをご容赦ください

data-ng-options="( obj.property | myFilter ) for obj in objects"

app.filter('myFilter', function() {
  return function(displayValue) {
    return (should update displayValue) ? 'newDisplayValue' : displayValue;
});
2
adrian