Question

我想做一个＆＃34; ng-repeat＆＃34;在键值对上有一些特殊条件。我的json数据如下：

mylist = {
  "Tom Hans": true,
  "Carl King": true,
  "anotherfield": "Josef Bush"
}

或者：

mylist = {
  "Tom Hans": true,
  "Carl King": true,
  "anotherfield": ""
}

我的两个键是上面的一些字符串格式，它们的值总是＆＃34; true＆＃34;，还有另一个固定键"anotherfield"，它可以有一个空值或者有一些像上方。

<ul>
    <li ng-repeat="(key, val) in mylist" ng-if="val == true">
        {{key}}</li>
</ul>

这是期望的结果：变量的第一个版本的输出：

Tom Hans
Carl King
Josef Bush

当＆＃34;另一个字段＆＃34;时变量的第二个版本的输出是空的：

Tom Hans
Carl King

有人可以帮助我实现这个目标吗？

Answer 1

<ul>
    <li ng-repeat="(key, val) in mylist" ng-if="val || val.length">
        {{ val.length ? val : key }}</li>
</ul>

如果val || val.length为真，或者其长度为> 0，

val将匹配。

如果val有一个长度，它将显示val，否则显示密钥。

Answer 2

这似乎很简单但很明确：

<ul>
    <li ng-repeat="(key, val) in mylist" ng-if="val">
        {{ val === true ? key : val }}
    </li>
</ul>

Answer 3

我个人会将此映射到控制器中的数组，这将减少视图中的观察者和子范围并简化视图。

$scope.objToArray = function(obj){      
  return Object.keys(obj).reduce(function(a, key){
     if(obj[key] === true){
       a.push(key)
     }else if(typeof obj[key] === 'string' && obj[key].trim().length){
       a.push(obj[key])
     }
     return a;
  },[]);      
}

查看

<li ng-repeat="item in objToArray(mylist)">
  {{item}}
</li>

Plunker demo

理想情况下，如果您在源头控制数据结构，我会考虑创建更友好的结构

Answer 4

你不需要在if语句中询问value == true，如果值为true，只需使用它，另一方面，如果值不是“”，则可能有一个长度，所以，在hava脚本中，如果某些东西> 0，则为真，最后你可以在以下时间进行ng-switch：

<ul>
    <li ng-repeat="(key, val) in mylist" ng-switch="val">
    <li ng-switch-when="val"> {{key}}</li>
    <li ng-switch-when="val.length"> {{val}}</li>

</ul>

angularjs ng-repeat键值对与组合条件

4 个答案: