Question

我有这样的事情：

<tr bgcolor="lightgrey">
  <th>ID</th>
  <th>Name</th>
</tr>
<tr ng-repeat="s in schools| filter:searchField | orderBy:'schoolId'"
    ng-click="selectSchool(s, $index)"
    ng-class="getSelectedClass(s)">
  <td>{{s.schoolId}}</td>
  <td>{{s.schoolName}}</td>
</tr>

好的，现在学校有一个int参数，现在我想在我的表中添加一个简单的图像（绿色和/或红点）......但是如果参数是0，那么它应该是红点，否则它应该是绿色的...

那么有可能以某种方式使用角度中的if语句吗？如果是的话，我需要它可以点击，所以一旦我按下红点，它应该变成绿色，反之亦然。

Answer 1

Use ng-if="parameter === 0"

    <img> red dot image

ng-if="parameter!==0"

    <img> green dot image

或者您也可以

<img ng-src="{{parameter===0?'reddotsrc' : 'greendotsrc'}}" ng-click="parameter!=parameter">

如果参数为0，则它切换1，如果为1，则为0。

Answer 2

您可以使用ng-show：

HTML：

var cmd = new JsonCommand<BsonDocument>("{ eval: \"myFunc({by:\"Bob\", on:ISODate(\"2015-10-02T01:11:18.965Z\")}, db.myCollection)\" }");
var result = db.RunCommand(cmd);

Javascript：

<div ng-app>
  <div ng-controller="TodoCtrl">
       <table>
        <tr ng-repeat = "data in comments">
        <td>{{data.type}}, {{data.type == 1}}</td>

            <td ng-show="data.type == 1 ">
             <img style="height:10px; width:10px;  padding:5px;" src="http://greensportsalliance.org/images/darkGreenSquare.gif">  
            </td>
            <td ng-show="data.type == 0 ">
               <img style="height:10px; width:10px; padding:5px;" src="http://cdn.playbuzz.com/cdn/04854427-89c9-48dc-bb5b-9705e0a298b5/6cb7bccb-3dcd-4af2-8da8-8c6260f2f934.jpg">  
            </td> 
        </tr>

    </table>
  </div>
</div>

Working example

Answer 3

这可能会对你有所帮助

<tr bgcolor="lightgrey">
  <th>ID</th>
  <th>Name</th>
</tr>
<tr ng-repeat="s in schools| filter:searchField | orderBy:'schoolId'"
    ng-click="selectSchool(s, $index)"
    ng-class="getSelectedClass(s)">
  <td ng-if="s.parameter == 0"><img src='reddot.png' ng-click="s.parameter = 1"></td>
  <td ng-if="s.parameter != 0"><img src='greendot.png' ng-click="s.parameter = 0"></td>
  <td>{{s.schoolId}}</td>
  <td>{{s.schoolName}}</td>
</tr>

如何在HTML中使用if语句将图像添加到表中？

3 个答案: