[英]Take value from radio button to choose an image in html
我有一個聊天應用程序。 此代碼用於在聊天頁面中顯示對話:
<div id="conversation">
<div id="messages" class="scrollbar col-md-6">
<ul ng-repeat="(k,v) in messageshistory " class="chat" data-ng-show="k == tmpuserid">
<li ng-repeat="(a,b) in v ">
<span ng-class="(b.from == tmpuserid) ? 'chat-img pull-right':'chat-img pull-left'">
<img src="./img/avatar.png" alt="User Avatar" class="img-circle">
</span>
<div class="col-md-10 chat-body clearfix" >
<div class="header">
<small data-ng-if="b.from == tmpuserid" class="text-muted">
<span class="glyphicon glyphicon-time"></span> {{ b.time }}
</small>
<strong ng-class="(b.from == tmpuserid) ? 'pull-right primary-font':'primary-font'" >{{b.fromname}}</strong>
<small data-ng-if="b.from != tmpuserid" class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>{{ b.time }}
</small>
</div>
<p>{{ b.message }}</p>
</div>
</li>
</ul>
</div>
</div>
因此在此應用程序中,注冊頁面上沒有上傳頭像的照片。 所以我使用<img src="./img/avatar.png" alt="User Avatar" class="img-circle">
但是我想用單選按鈕在注冊頁面中添加“性別”,例如:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female
</form>
並且當用戶在注冊中選中“男性”時,他將使用<img src="./img/maleavatar.png" alt="Male Avatar" class="img-circle">
當用戶選中“女性”時,她將使用<img src="./img/femaleavatar.png" alt="Female Avatar" class="img-circle">
我的意思是,此應用程序將具有兩個頭像圖像,如果男性使用男性,女性使用女性,我該怎么寫?
您可以將兩個圖像都添加到HTML中,然后在ng-switch
上按用戶性別使用正確的圖像( ng-switch和單選按鈕綁定上有足夠的資源供您查找解決方案)。
希望這能使您步入正軌,即使不是僅僅詢問一下。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.