web-dev-qa-db-ja.com

AngularJS:「ng-repeat」内のIFステートメント?

AngularJS v1.2.9を使用しています。

ng-repeat内で、オブジェクトの値をチェックし、条件に基づいてアクションを実行するにはどうすればよいですか?

英語では、次のようなものです。

if `X` is not null, then show `X`. Is it possible?

これが私のng-repeatスケルトンです:

<li ng-repeat="r in results">
    <div>{{ r.title }}</div>
    <div>{{ r.location }}</div>
    <!--
    if ( r.date!=="null" ) {
        <div>{{ r.date }}</div>
    } else {
        <div>Date not confirmed yet.</div>
    }
    -->
</li>

Nullでない場合は、r.dateを表示する必要があります。それがnullの場合、私は別のことを言います。

親切に助けてください。皆さんありがとう。

5
夏期劇場
<li ng-repeat="r in results">
  <!-- If r.date contains a value, show it -->
  <span ng-if="r.date">{{r.date}}</span>
  <!-- If r.date does not contain a value show placeholder text -->
  <span ng-if="!r.date">Date not confirmed yet.<span>
</li>

JavaScriptで変数の前の感嘆符は何を意味するのか も参照してください。

8

更新

質問はあまり明確ではなかったので、ng-bindディレクティブを配置するだけで必要なものがここにあります。コンテンツが大きい場合は、以下の@JustOneMoreQuestionで提案されている方法に切り替えることができます。

<li ng-repeat="r in results" ng-if="r.date">
    <div ng-bind="r.date ? r.date : 'Date not confirmed yet.'"></div>
</li>

ng-ifを使用すると簡単に実行できます

<li ng-repeat="r in results" ng-if="r.date">
    <!--
    if ( r.date!=="null" ) {
        {{ r.date }}
    }
    -->
</li>

または、それらをフィルターで除外するフィルターを選択すると、dateを含む要素のコレクションが作成されます。

<li ng-repeat="r in results| filter: { date: '' }">
    <!--
    if ( r.date!=="null" ) {
        {{ r.date }}
    }
    -->
</li>
3
Pankaj Parkar

これをチェックして、

<li ng-repeat="r in results" >
    <div data-ng-if="r.date !== 'null'">
        Your Date
    </div>
    <div data-ng-if="r.date == 'null'">
        Date not confirmed yet
     </div>
 </li>
1
Anil Kumar Ram