angularjs - 检查 json 字典是否有空字符串作为值

Question

我想要实现的是仅当 JSON 对象中的元素值不等于空字符串时才显示和元素''。

例如：

说我有以下 json 对象

{
    'id' : 23,
    'name' : 'Adrian Reese',
    'age' : '',
    'location' : ''
}

现在在我显示用户信息的部分模板中，我执行以下操作：

<h1>{{ user.name | capitalize }}</h1>
<span class="age">Age: {{ user.age }}</span>
<span class="location">Location: {{ user.location }}</span>

对于每个用户，我希望<span>'s仅当值不等于时才可见''。我怎样才能做到这一点？

Answer 1

使用ngShow：http ://docs.angularjs.org/api/ng.directive:ngShow

<span ng-show="user.age != ''" class="age">Age: {{ user.age }}</span>
<span ng-show="user.location != ''" class="location">Location: {{ user.location }}</span>

Answer 2

div您可以使用以下元素包装您的标记，例如ng-show：

<div ng-show="user.age != ''">
    <h1>{{ user.name | capitalize }}</h1>
    <span class="age">Age: {{ user.age }}</span>
    <span class="location">Location: {{ user.location }}</span>
</div>

Answer 3

您可以使用过滤器在代码中指定可见属性规则：

http://jsfiddle.net/g/sANcQ/2/

 <div ng-controller="Ctrl">
   <h1>{{ user.name }}</h1>
   <span ng-repeat="(key, value) in user | userVisibleProps" class="{{key}}">{{key}}: {{value}}</span>
</div>

Javascript：

function Ctrl($scope) {
    $scope.user = {
        'id' : 23,
        'name' : 'Adrian Reese',
        'age' : '',
        'location' : ''
    };
}

angular.module('app', [])
  .controller('Ctrl', Ctrl)
  .filter('userVisibleProps', function(){
      return function(user) {
          var visibleUser = {};
          for(var key in user) {
              if(key != 'id' && user[key] !== '') {
                  visibleUser[key] = user[key];
              }
          }
          return visibleUser;
      };
  });

angular.bootstrap(document.body, ['app']);