XML或Javascript中的IF ELSE条件

时间:2019-06-21 02:31:12

标签: if-statement conditional-statements nativescript angular2-nativescript

我对本机脚本(js和xml)的listview中的if else条件有疑问。

我当前要在实际日期晚于计划日期时使列表视图突出显示。换句话说,想要将listview指示为延迟工作,以便人们意识到这一点。

所有迟到的工作的值为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的所有作业都是红色。而其他人将保持正常状态。

1 个答案:

答案 0 :(得分:0)

我为您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" },
],