XML 或 Javascript 中的 IF ELSE 条件

Question

我对 nativescript（js 和 xml）中列表视图中的 if else 条件有疑问。

我目前想让列表视图在实际日期已经晚于计划日期时突出显示。换句话说，想要将列表视图指示为延迟工作，以便人们意识到它。

所有迟到的作业的值为 1，我想用它来区分突出显示。

                    <lv:RadListView.listViewLayout>
                        <lv:ListViewLinearLayout scrollDirection="Vertical"/>
                    </lv:RadListView.listViewLayout>


                    <lv:RadListView.itemTemplate>
                        <StackLayout class="ListStackOuter" tap="onJobListTap">
                            <GridLayout class="ListGrid" columns="80, *, 30" rows="auto,auto" >                                   
                                <Label id="lblJobId" class="ListLabelMediumBold" text="{{ job_id }}" row="0" col="0" textWrap="true" colSpan="2"/>
                                <Label id="lblNext" class="ListLabelNext" text=">" row="0" col="2"/> 
                                <Label id="lblJobDesc" class="ListLabelSmall" text="{{ job_desc }}" row="1" col="0" colSpan="3"/>  
                                <Label id="lblJobLate" class="ListLabelSmall" text="{{ late_job }}" row="1" col="2" colSpan="3"/>  
                            </GridLayout>
                         </StackLayout>
                    </lv:RadListView.itemTemplate>

                </lv:RadListView> 
            </ScrollView>

我希望所有 late_job status = 1 的作业都将显示为红色。而其他人将保持正常。

Answer 1

我已经为你创建了一个游乐场here。您可以检查 late_job 的值，例如 class="{{ (late_job === '1') ? 'list-group-item-heading' : ''}}"

您可以像下面这样使用三元运算符

<ListView class="list-group" items="{{ countries }}" itemTap="{{ onItemTap }}"
        style="height:1250px">
        <ListView.itemTemplate>
            <FlexboxLayout flexDirection="row" class="list-group-item">
                <Image src="{{ imageSrc }}" class="thumb img-circle" />
                <Label text="{{ name }}" class="{{ (name === 'Australia') ? 'list-group-item-heading' : ''}}"
                    verticalAlignment="center" style="width: 60%" />
            </FlexboxLayout>
        </ListView.itemTemplate>
    </ListView>

并在 .js 中

countries: [
      { name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
      { name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
      { name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
      { name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
      { name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
      { name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
],

XML 或 Javascript 中的 IF ELSE 条件

IF ELSE Condition within the XML or Javascript

if-statement

conditional-statements

nativescript

angular2-nativescript