Question

$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。

Answer 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.

Answer 2

使用terenary运算符修改您的td以检查值的存在。如果它不存在，则只打印---

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

Answer 3

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

＆＃13;

<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 ">

＆＃13;

Answer 4

您可以为同一个

编写过滤器

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>

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

4 个答案: