2

私が達成しようとしているのは、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に、値が と等しくない場合にのみ が表示されるようにし''ます。どうすればそれを達成できますか?

4

3 に答える 3

10

使用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>
于 2013-02-14T09:45:04.623 に答える
2

フィルタを使用して、可視プロパティ ルールをコードで指定できます。

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']);
于 2013-02-14T10:41:14.707 に答える
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>
于 2013-02-14T09:45:19.383 に答える