如何根据ng-repeat表有条件地输入列标记?

时间:2014-11-06 21:54:51

标签: angularjs angularjs-ng-repeat

我尝试做的是根据ng-repeat的迭代对象值的某些值有条件地改变td列块中显示的内容。更具体地说,如果您查看下面的代码,我想要做的是基于data.col2val的某些值,我想更改column2中该行显示的内容。

我知道没有ng-if-else这样的东西,但如果有的话,我的代码可能看起来像这样:

<table class="table" id="myTable">
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody ng-repeat="data in dataStore">
        <tr>
            <td>{{data.col1val}}</td>
            <td ng-if="{{data.col2val}}='something'" style="somestyle">something</td>
            <td ng-if-else="{{data.col2val}}='somethingelse'" style="someotherstyle">somethingelse</td>
        </tr>
    </tbody>
</table>

也许有一个微不足道的方法可以做到这一点,但我似乎无法计算/谷歌。我知道如何使用ASP.NET/Razor而不是Angular,所以任何帮助都会受到赞赏并原谅我的无知。

1 个答案:

答案 0 :(得分:2)

ng-if="data.col2val=='something'"

你没有在ng-if指令

中使用花括号

&#13;
&#13;
var app = angular.module('app', []);

app.controller('firstCtrl', function($scope){
  
  
  $scope.dataStore = [
    
    {col1val:"Mike", col2val:"something"},
     {col1val:"Mike", col2val:"somethingelse"},
    
  ];
 
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">
    
    <table class="table" id="myTable">
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody ng-repeat="data in dataStore">
        <tr>
            <td>{{data.col1val}}</td>
            <td ng-if="data.col2val=='something'" style="somestyle">something</td>
            <td ng-if="data.col2val=='somethingelse'" style="someotherstyle">somethingelse</td>
        </tr>
    </tbody>
</table>

      </div>
</body>
&#13;
&#13;
&#13;