如何在使用 angularJs 时在 html 值中显示 JSON 值？答案

【问题标题】：How to display a JSON value in html value as it is using angularJs?如何在使用 angularJs 时在 html 值中显示 JSON 值？
【发布时间】：2017-03-03 11:34:12
【问题描述】：

$scope.categories = [ {
      "advertiser_id": "2",
      "tier_id": 1,
      "tier_name": "1",
      "base_cpm_price": "",
      "retarget_cpm": "",
      "gender": "",
      "location": "",
      "ageblock1": "",
      "ageblock2": "",
      "ageblock3": "",
      "ageblock4": "",
      "ageblock5": "",
      "default": 1,
      "status": 1
    },
    {
      "advertiser_id": "2",
      "tier_id": 2,
      "tier_name": "2",
      "base_cpm_price": "",
      "retarget_cpm": "",
      "gender": "",
      "location": "",
      "ageblock1": "",
      "ageblock2": "",
      "ageblock3": "",
      "ageblock4": "",
      "ageblock5": "",
      "default": 1,
      "status": 1
    },
    {
      "advertiser_id": "2",
      "tier_id": 3,
      "tier_name": "3",
      "base_cpm_price": 1,
      "retarget_cpm": 1,
      "gender": 1,
      "location": 1,
      "ageblock1": 10,
      "ageblock2": 0,
      "ageblock3": 0,
      "ageblock4": 0,
      "ageblock5": 0,
      "default": 0,
      "status": 1
    }
  ];

我有一个 3 JSON 对象，我想使用 anjularJS 在 HTML 视图中显示它。但是当我试图在 HTML 0 中显示时，值被认为是空的。

<tr ng-repeat="defaultsettings in listDefaultsettings >
   <td>{{defaultsettings.tier_name }}</td>
   <td>{{defaultsettings.base_cpm_price || '---'}}</td>
   <td>{{defaultsettings.retarget_cpm || '---'}}</td>
   <td>{{defaultsettings.gender || '---'}}</td>
   <td>{{defaultsettings.location || '---'}}</td>
   <td>{{defaultsettings.ageblock1 || '---'}}</td>
   <td>{{defaultsettings.ageblock2 || '---'}}</td>
   <td>{{defaultsettings.ageblock3 || '---'}}</td>
   <td>{{defaultsettings.ageblock4 || '---'}}</td>
   <td>{{defaultsettings.ageblock5 || '---'}}</td>
   <td class="td-active default-pricing">
</tr>

用 --- 代替 0，但我想显示值，即 0。

【问题讨论】：

因为在 javascript 0 if falsy.
那么我该如何解决这个问题@Jai
expr >= 0 ? expr : "---" 应该为你做到这一点。

标签： javascript html angularjs json

【解决方案1】：

因为在 javascript 中 0 是虚假的。

console.log(0||1);
console.log(""||"abc");
console.log(undefined||"defined");
console.log(null||"notnull");

要解决您可能遇到的问题，您可能会以这种方式使用 angular.isNumber()/angular.isString() 方法进行三元 if/else 操作：

// define a method which returns a value
$scope.isEmptyValue = function(val, dashes){
  return (angular.isNumber(val) || !angular.isString(val)) ? val : dashes;
};

现在在视图中你可以这样做：

<td>{{ isEmptyValue(defaultsettings.prop, "---") }}</td>

Checkout this at plnkr.

【讨论】：

它的工作.. 0 正在显示，但对于空值 --- 不显示 :(
@PuneethKumar 只需为空值添加一个或条件。
<td> {{(defaultsettings.retarget_cpm >= 0 || defaultsettings.retarget_cpm != "") ? defaultsettings.retarget_cpm : '---'}} </td> 我使用上面的代码但同样的问题.. 无法显示 ---...请帮助我@jai

【解决方案2】：

替换条件以检查更好的虚假值。（我相信您在这里使用"" 作为虚假值）

<tr ng-repeat="defaultsettings in listDefaultsettings >
<td>{{defaultsettings.tier_name }}</td>
<td>{{defaultsettings.base_cpm_price===""?defaultsettings.base_cpm_price : '---'}}</td>
<td>{{defaultsettings.retarget_cpm===""?defaultsettings.retarget_cpm: '---'}}</td>
<td>{{defaultsettings.gender===""?defaultsettings.gender : '---'}}</td>
<td>{{defaultsettings.location===""?defaultsettings.location : '---'}}</td>
<td>{{defaultsettings.ageblock1===""?defaultsettings.ageblock1 : '---'}}</td>
<td>{{defaultsettings.ageblock2===""?defaultsettings.ageblock2 : '---'}}</td>
<td>{{defaultsettings.ageblock3===""?defaultsettings.ageblock3 : '---'}}</td>
<td>{{defaultsettings.ageblock4===""?defaultsettings.ageblock4 : '---'}}</td>
<td>{{defaultsettings.ageblock5===""?defaultsettings.ageblock5 : '---'}}</td>
<td class=" td-active default-pricing ">

【讨论】：

【解决方案3】：

你可以为它写一个过滤器

angular.module("my_module_name").filter('ignoreZeroAsFalse', ignoreZeroAsFalse);

function ignoreZeroAsFalse() {
    return filterDefinition;

    function filterDefinition(input) {
        return (input || input === 0)? input : '---'; 
    }

}

你的 html 会变成下面这样

<td>{{defaultsettings.base_cpm_price | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.retarget_cpm | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.gender | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.location | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock1 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock2 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock3 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock4 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock5 | ignoreZeroAsFalse}}</td>

【讨论】：

【解决方案4】：

使用三元运算符修改您的 td 以检查该值是否存在。如果不存在，则仅打印 ---

   <td>{{(defaultsettings.retarget_cpm != null || defaultsettings.retarget_cpm !== "") ? defaultsettings.retarget_cpm : '---'}}</td>

【讨论】：

它的工作.. 0 正在显示，但对于空值 --- 不显示 :(