Question

我正在使用离子框架工作构建混合应用程序。我有一个Json数组，它在html页面中调用时显示为列表视图。我希望为列表中的每个项目显示不同的gui表单。但我的问题是当我将表单添加到html时，我为列表中的每个项目获取相同的表单。

这是我的数组代码......

var chats = [{
    id: 0,
     name: 'jjhyyyt',
    lastText: 'http://www.bovingtonprimary.dorset.sch.uk/wp-content/uploads/2015/03/Diary-Icon.png',
    face: 'http://www.chhattisgarh.bsnl.co.in/assets/img/cc.png'   
  }, {
    id: 1,
    name: 'Evesdfsdfnts',
    lastText: 'asde ',
    face: 'http://gandf.us/images/events-icon.png'
  }]

这是我的html文件..

<ion-view view-title="{{chat.name}}">
  <ion-content class="padding">
    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px"/>
    {{chat.id}}
    <p>
    <!--<head>
     <script type="text/javascript" src="http://form.jotform.me/jsform/52312831743450"></script>
    </head>-->
    <head>
    <meta charset="UTF-8">

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.css" media="screen" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="lib/jquery.ui.core.js"></script>
    <script type="text/javascript" src="lib/jquery.ui.widget.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $("form").form();
        });
    </script>

    <style>
    {
    font-size:12px;
    font-family:verdana;
}

h1
{
    font-size:20px;
    padding:0px 20px 20px;
    margin:0px;
    text-align:center;
}

body { background-color:#F9F9F9; }

input,textarea { padding:7px; font-size:14px !important; width:250px; }

p > label:first-child
{
    display: inline-block;
    font-weight: 700;
    margin-bottom: 5px;
    padding-right: 35px;
    text-align: right;
    width: 135px;
}

ul li { padding:5px; }

span#labeltext { margin: 3px 0px 0px 3px; }

.ui-icon-triangle-1-s { background-position: -64px -13px; }

#submitbutton { width:auto; }

label.ui-state-default { display:inline-block !important; }

ul { left: 44.5%; top: 49.5%; }

#container
{
    margin:0px auto;
    width:500px;
    background-color:#eee;
    padding:20px;   
    border-radius: 5px;
    clear: both;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
    </style>

</head>
<body>

    <div id="container">

        <form action="" method="post" id="customtheme">
            <p>
                <label for="RequestType">Request Type</label>
              <select name="Request" id="request">
                    <option value="">--select--</option>
                    <option value="carPass">Car Pass Ticket</option>
                    <option value="seminarPass">Seminar Pass</option>
                    <option value="identyCard">Identy Card</option>
                </select>
            </p>

            <p>
              <label for="description" style="vertical-align: top;">Description</label>
                <textarea name="description" id="description" cols="10" rows="5"></textarea>
            </p>

            <p>
                <input type="button" name="submit" style="align:center" value="Submit" id="submitbutton" onClick="alert('Submitted.');"/>
            </p>
        </form>
    </div>
</body>
    </p>
  </ion-content>
</ion-view>

我能够获取列表中每个值项的id。如果可以为ID设置if语句我将能够做到但我无法在此处添加if语句...请帮助我....

如何在HTML

0 个答案: